Borders6:44 with Guil Hernandez
In this video, we'll cover three properties we can use to create and style borders.
Now that we have the content and 0:00 padding areas defined, let's style the border area of our Wildlife div. 0:01 So there are three properties we can use to create and style borders. 0:07 First, we can set the width of a border with the border width property. 0:11 So let's go back to our wildlife rule. 0:15 And right beneath the padding declaration, let's type, border-width. 0:17 And let's set the border width value to 10px. 0:24 Now we can also define border-width value with any length or percentage units, or 0:28 the keyword values, thin, medium, and thick. 0:33 Now in order to actually see the border we apply to an element, 0:37 we'll need to define a border style. 0:40 So right beneath the border-width declaration let's type border-style. 0:43 Now the border-style property is what sets the style of the element's border. 0:49 Some of the most common border-styles are solid, dashed and dotted. 0:55 So let's go ahead and use the value, dotted. 0:59 And if we want to give our border a color, 1:03 we'll need to use the border color property to set that color. 1:06 So right beneath the border-style declaration, let's type border-dash color. 1:09 And the border color values can be any of the keyword color values. 1:15 It can also be a hexidecimal or RGBA value. 1:18 So let's go ahead and use that orange hex value we used earlier. 1:21 So let's make the border color value #ffa949. 1:25 So now when we save our stylesheet, bring up the browser preview and 1:32 hit Refresh, we can see how our div element 1:36 has an orange dotted border that's 10px wide on each side. 1:39 And if we wanna go back and 1:45 give it a dashed border, we can change the dotted value to dashed. 1:46 And when we take a look at it again, there's our fancy dashed border. 1:52 But in our case we'll want a solid border. 1:56 So let's go back and set the border style value to solid. 1:58 And now we have a solid border on each side. 2:06 So like the padding shorthand property, 2:10 these border properties can have anywhere from one to 2:12 four values defined that set the border properties of each side of the div. 2:15 So if we go to our border width-value and add a second value of 20px, 2:20 when we take a look at our div once again, now the top and 2:27 bottom border-widths are still 10px wide while the left and 2:31 right borders are now 20px wide. 2:36 And if we go back to our border-style value and add a value of dotted. 2:40 Let's go back and refresh the page. 2:49 So now our top and bottom borders are solid while the left and 2:51 right borders are now dotted. 2:56 And the same goes for the color value. 2:58 So if you go back and add the value red right before the hex value, 3:00 when we refresh the page we can see that our top and 3:06 bottom borders are now red while the left and right borders are still orange. 3:08 So, once again, remember what the order of these values mean. 3:13 So if we go back to our border-color value and add two more values, 3:16 let's say blue and green. 3:20 Now the first value will apply to the top border color, the second to the right, 3:24 the third to the bottom, and the fourth to the left border color. 3:28 So if we take a look at it again, 3:33 we can see how we now have four different border colors on each side of our div. 3:35 Now, most of the time, we're only gonna use one border-width, one color, and 3:41 one style property on an element. 3:45 So, we can define them all in one shorthand border property. 3:47 So back in our wildlife rule, let's go ahead and 3:50 type border, and define these values with the shorthand notation. 3:53 So the first value we're gonna define is for the border-width. 3:59 So let's make it 10px pixels. 4:02 Next we're gonna define the border-style. 4:04 So let's type solid. 4:06 And finally we're gonna define the border-color. 4:07 So I'm gonna go ahead and copy the orange hex value and now we can go ahead and 4:09 remove the individual border properties since we now have them defined in 4:14 the shorthand property. 4:18 And when we take a look at it again and 4:20 refresh, we can see how we get the same results we did earlier. 4:22 But we're still able to use the granular border styles if we 4:28 need to override one of these border-values. 4:31 So for instance, say we now need a dashed bottom border. 4:33 Well, we can go back and add a border bottom style property, so 4:37 right beneath the border declaration, let's type border-bottom-style. 4:42 And if we set the value to dashed when we save our stylesheet and 4:49 take a look at it once again, we can see how this styles the bottom border only. 4:53 And we can do the same for border left style, border top style, and so on. 4:59 Or, if we need a different border-color on a particular side, we can also write, 5:06 border, let's say left color, and let's make it green. 5:11 And when we take a look at it again, 5:18 we can see now that our left border is the color green. 5:20 Now what we wanna do moving forward in our design, 5:24 is give our wildlife element a top border only. 5:27 So let's go ahead and remove the border bottom style and 5:30 border left color declarations, and we're gonna change 5:34 the border shorthand property to the border-top shorthand property. 5:38 So now when we save our stylesheet, 5:43 we can see that the styles are now applied to the topside of our div only. 5:46 Finally, one more thing we need to know about border-styles is that if no 5:53 border color is specified, the border will take on the text color of that element. 5:56 So for example, if we remove our border-color and change the color to say 6:01 red, when we save and take a look at it again, we can see how 6:08 the border inherits and displays the red text color defined in the color property. 6:12 So let's set our color value back to white and 6:17 the border-color back to that orange hex value. 6:20 So now if we look through our stylesheet and 6:23 come across a border property, we know exactly what it means. 6:25 So, for instance, in the main footer rule, 6:28 we can see that the border bottom style is solid, and 6:32 the color is the hex value shade of orange while the border width is 10px. 6:37
You need to sign up for Treehouse in order to download course files.Sign up