Rounded Corners

Quick reference

• 00:05 In this video I wanna talk about rounded borders.
• 00:07 Now we've already created regular borders, so if we pick up one real quick.
• 00:12 Let's go border three pixels.
• 00:15 Let's call this solid and let's go blue.
• 00:18 And if we get this padding, let's say 20 pixels and
• 00:24 a width of 300 pixels, okay that should be good.
• 00:29 So if we come back here this is a border save it and
• 00:35 reload, we get this very simple border.
• 00:37 Now what do we do if we want to round this corners?
• 00:40 Well CSS makes it very easy with something called a border radius.
• 00:44 So border radius is a fairly new thing in CSS 3,
• 00:48 latest version of CSS, and it's very simple to do you just come in here and
• 00:52 instead of border, let's just get rid of this.
• 00:55 We just call border dash radius and let's say 30 pixels.
• 01:01 Now we've got to give this a background and let's call it blue.
• 01:09 Save it, reload, boom, we get this nice rounded thing.
• 01:13 Now we can play around with this, you can go three pixels.
• 01:17 And you can see just very subtly so fun to sort of play around with kind of cool.
• 01:24 We don't necessarily have to have a background, we can instead use a regular
• 01:29 old border and let's go three pixels solid and call this blue.
• 01:34 If we save this,
• 01:36 hit reload we get the same sort of thing play around with our border radius.
• 01:42 Yeah, and that's cool.
• 01:43 So the border radius is actually shorthand.
• 01:46 You know we've done shorthand in the past.
• 01:48 You can actually designate specific corners, top, left, bottom.
• 01:53 And it looks like this, you go
• 01:58 border-top-right-radius and
• 02:05 then let's say 30 pixels, save this, come back here and hit reload.
• 02:10 And you could see there is a square all the way around, but
• 02:12 right here we have a rounded border, so very cool.
• 02:15 Likewise you can do or bottom-right-radius,
• 02:21 ops and go 30 pixels.
• 02:25 Save it, changes.
• 02:28 So, I mean you can mix and match.
• 02:29 You can do ten pixels, sort of play around different things.
• 02:35 That's kinda fun specifying each corner.
• 02:38 So, let's take a look at the short hand really quickly for this.
• 02:40 We can do short hand for all of these corners instead of writing out each line.
• 02:44 I like to kind of, be explicit and write out each one top right,
• 02:48 bottom right etcetera, etcetera.
• 02:49 But we can do shorthand, we could just go border-radius.
• 02:55 And let's go 10 pixels, 20 pixels, 30 pixels, and 40 pixels.
• 03:03 Just to be goofy.
• 03:04 Save this.
• 03:04 Hit reload.
• 03:06 And we get this kind of almost a smiley face.
• 03:08 So what do these numbers mean exactly?
• 03:11 Well, the first one applies to top left, right?
• 03:14 This ten pixels.
• 03:15 And the second value is top right.
• 03:18 So top left, top right.
• 03:19 The third value is bottom left and the fourth value is bottom right.
• 03:24 Kind of a weird thing to have to memorize so
• 03:25 like I said I usually don't memorize those things, but you can.
• 03:28 So what happens if we get rid of this 40 we save this come back and
• 03:33 hit reload what's going on here, we still see some wierd stuff.
• 03:35 Okay, this is going to blow your mind, but
• 03:37 we need just use three values the first value applies to top left, all right?
• 03:41 The second value applies to the top right and the bottom left, and
• 03:45 the third value applies to the bottom right.
• 03:47 So, that's really very kinda weird, but I will strike two values and
• 03:51 take a look at that.
• 03:52 So, looks like these two, and these two.
• 03:57 So, when you use two values, the first value applies to the top left, and
• 04:01 the bottom right, and the second value applies to the top right,
• 04:03 and the bottom left.
• 04:04 So, if there's just no way I'm going to memorize that,
• 04:07 there's no way you're going to memorize that,
• 04:08 there's no reason why you should memorize that, that's why I always,
• 04:11 just write out these, each of these explicitly, give them their own line.
• 04:16 Its easier for me, it doesn't get confusing.
• 04:18 If somebody else comes and
• 04:19 looks at your code later on if you're working in a company and
• 04:22 you have more than one developer, maybe they won't have to memorize this either.
• 04:25 So if they look at this its nicer to have it all, each corner has their own line.
• 04:31 So other people, it's easier for them to understand, too.
• 04:33 So anyway, that's pretty much rounded corners.
• 04:36 Play around with this, it's a lot of fun.
• 04:38 Very easy to do with CSS, and that's all for this video.

Lesson notes are only available for subscribers.