Border Radius

CSS also has properties that let us create rounded corners on 0:00 elements without the need for any images or extra markup. 0:04 With the border-radius properties we can easily define exactly how 0:07 rounded the borders appear. 0:11 So this time, we want to apply rounded corners to our Wildlife div. 0:14 As well as the images on the page. 0:18 So, let's go back to our style sheet and again, 0:21 underneath the Layout Styles, let's scroll down to the wildlife rule. 0:23 So, first let's apply the rounded corners to 0:28 each individual corner of our Wildlife div. 0:31 Because we're also able to specify custom border-radius values for 0:35 each corner of an element. 0:38 The border-radius property is actually the shorthand property for 0:40 four separate values. 0:44 So first, let's type border-top-left-radius. 0:46 And next, 0:53 let's type border-top-right-radius. 0:55 Followed by border-bottom-right-radius. 1:03 And finally, border-bottom-left-radius. 1:11 [BLANK_AUDIO] 1:16 So again, here we're adding a border radius property for 1:18 each corner of our div. 1:22 So now, let's assign a value to each of those four corners. 1:24 The border values we assigned can be any length unit, or a percentage. 1:28 So first, we're going to set our border-radius with pixel units. 1:32 So, let's set the border top left radius value to 50px. 1:36 And let's set the top right radius value to 10px. 1:42 And we're also gonna set the bottom right radius to 50px, 1:47 and the bottom left radius to 10px. 1:52 [SOUND] All right, so let's save our style sheet. 1:55 Go back to the browser, and when we refresh the page, 1:57 notice how the top left corner has a wider border radius of 50 pixels, 2:01 while the top right radius is smaller at 10 pixels. 2:06 Then, once again, 2:10 we have a 50 pixel bottom right radius and a 10 pixel bottom left radius. 2:11 And notice how the top border styles also follows the curve of the border-radius, 2:17 as all border styles will. 2:23 Now if we don't want to type all these values individually, 2:25 like most CSS properties, there is also a shorthand property for border-radius. 2:29 And most of the time, this is the property we're gonna use in a project. 2:33 So instead of writing the four separate declarations, 2:37 we can simply use the border-radius property. 2:40 And the order values in the border-radius shorthand property also follows that 2:44 same clockwise order used for the padding and margin shorthand values. 2:49 So the first value applies to the top left corner, so let's again make it 50 px. 2:54 And the next one applies to the top right corner. 2:59 We're gonna make this one ten px. 3:01 And the next value applies to the bottom right border, 3:04 which we'll again set to 50px. 3:08 And finally, the fourth value is applied to the bottom left border, 3:10 which we'll again make 10px. 3:14 And once again, everything should still look exactly the same way. 3:18 Which it does, 3:21 we're just now defining it with the handy border-radius short hand property. 3:21 And we could actually shorten this value even further, since the top left and 3:26 bottom right values are the same, and the top right and 3:31 bottom left values are also the same. 3:34 So instead of the four units, we can actually shorten 3:36 this down to 50px and 10px, and nothing changes. 3:41 And if we want to set an even border-radius for 3:47 each side of our div, we'll simply need to define one value. 3:50 So instead of these two values, 3:54 let's define an all around border-radius value of 25 px. 3:57 So when we take a look at it again, 4:01 you can see how each side has a 25 pixel border-radius. 4:03 Again, this is probably the most common way you'll use the border-radius property. 4:08 You'll only use one value to set an even border-radius all around. 4:12 Like most values that accept a length unit, 4:17 we're also able to define a border-radius using Ms and percentage units. 4:20 But keep in mind that when we use a percentage unit for 4:25 border-radius, the percentage value refers to the dimensions of the element. 4:28 So if we change the border top left and border bottom right values to 100%, 4:33 notice how the rounded corner takes up 4:41 100% of the top left and bottom right corners of our div. 4:44 So as we can see, 4:50 border-radius with percentages can create some interesting shapes. 4:51 So for instance, we'll go back to our border-radius value. 4:54 And let's give it an all around border-radius value of 50%. 4:58 So when we save our style sheet and 5:02 refresh the page, notice how the result is an oval-shaped border-radius all around. 5:03 And if we want to create a perfectly round circle, well the width and 5:09 the height of the element need to be the same. 5:13 So for instance, let's add a width value of 500px. 5:15 And let's add a height value of 500px as well. 5:21 And we'll keep the border-radius at 50%. 5:25 So, when we go back and 5:28 take a look, we can see that the result is a circle-shaped div. 5:29 Now, border-radius 50% is also commonly used to 5:34 create rounded images in our design. 5:38 We can do it with CSS without having to rely on an image editor, like Photoshop. 5:41 So for instance, I'll scroll up to the image rule in our style sheet. 5:45 And I'll paste in the border-radius 50% declaration, and when we refresh the page, 5:50 notice how our images take on that circular or elliptical shape. 5:57 But this doesn't really fit our design. 6:02 So moving forward, let's set a smaller border-radius of 10 pixels for our images. 6:05 So we're gonna change the value from 50% to 10px, and let's scroll down and 6:12 do the same for our wildlife div. 6:17 So, down in our layout styles in the wildlife rule, 6:20 we're going to remove the width and height styles. 6:23 And let's set the border-radius to 10px. 6:26 Right, so let's take a look. 6:31 I think that looks much better, so let's stick with this moving forward. 6:34