Borders

Quick reference

• 00:05 Okay, in this video I want to talk about Borders.
• 00:07 Now, whatever selector you're using you can wrap it in a border,
• 00:11 in fact let's get rid of this background guys.
• 00:14 Clean this up a little bit, so let's say we wanted to wrap this H1 tag in a border.
• 00:18 We could do that pretty easily using the border-style tag, and
• 00:23 as soon as we do that, see we have a lot of different options.
• 00:27 We have this dashed, dotted, double, groove, hidden, inherit and inset.
• 00:31 Let's try dashed first and if we go like that, hit Save,
• 00:35 come back in here, reload, boom, we get this huge thing.
• 00:39 Now let's go back to our HTML and get rid of most of this.
• 00:44 Save this and come back, boom.
• 00:46 So this is, what do we say, dashed.
• 00:49 Let's try some of the other ones, dotted.
• 00:55 It's kinda cool.
• 01:00 And, let's see, double.
• 01:02 Let's see what that one is.
• 01:04 Kinda neat.
• 01:07 What else?
• 01:08 Groove.
• 01:09 I'm not sure what that one is.
• 01:12 Okay, interesting.
• 01:13 So lets go back here and go dotted again.
• 01:16 And if we hit Reload we see its purple and its pretty thick and
• 01:19 we can designate the size of that as well.
• 01:22 And we do that with border-width.
• 01:26 And lets give it a one pixel.
• 01:28 A pixel is one small character, and this is very small.
• 01:32 If we change this to 10, save, and reload, boom, we get really thick ones.
• 01:36 Now you may want a different color for your border.
• 01:39 That's pretty easy too.
• 01:40 We just go border-color and let's give this a CCC, CCC.
• 01:46 Save it.
• 01:48 Boom, now it's gray, so that's pretty cool.
• 01:50 Now here all four sides are the same, right?
• 01:53 But we can tell each side, top, bottom, left and right to do something different.
• 01:58 And to do that we just go say border-top-style.
• 02:06 And let's call this dotted, and
• 02:10 we can go border-bottom-style solid, let's say.
• 02:15 It looks like I misspelled style, look you'll notice how it's giving us a little
• 02:20 error thing, that's very useful, S-T-Y-L-E.
• 02:22 And if we save this, and hit reload, boom, the top is dotted and the bottom is solid.
• 02:27 And likewise, you can go border-left-style groove, and we get this groove.
• 02:36 So you can play around with this, and like in the last video,
• 02:39 we can do a border shorthand as well.
• 02:41 So if we delete all these things, to do a border shorthand, we just go border,
• 02:47 and then let's say 10px, no let's go 5px, mix it up a little.
• 02:51 5px and we want dashed for all of them and let's call it red, I don't know.
• 02:59 Save that, hit Reload, boom.
• 03:01 So that's just a way to sorta get everything on one line.
• 03:04 Again, you have to sorta memorize what goes where.
• 03:07 So I tend to just use each line individually, but
• 03:09 some people like to streamline things and that's how you do it.
• 03:13 So that's the border, that's kinda fun, you can play around with it, use it for
• 03:16 different things.
• 03:17 This is sort of a very popular tag a lot of things have dashed borders and things.
• 03:21 So it's a very easy way to add some styling elements to your HTML and
• 03:25 that's all for this video.

Lesson notes are only available for subscribers.