CSS also has properties that let us create rounded corners on

elements without the need for any images or extra markup.

With the border-radius properties we can easily define exactly how

rounded the borders appear.

So this time, we want to apply rounded corners to our Wildlife div.

As well as the images on the page.

So, let's go back to our style sheet and again,

underneath the Layout Styles, let's scroll down to the wildlife rule.

So, first let's apply the rounded corners to

each individual corner of our Wildlife div.

Because we're also able to specify custom border-radius values for

each corner of an element.

The border-radius property is actually the shorthand property for

four separate values.

So first, let's type border-top-left-radius.

And next,

let's type border-top-right-radius.

Followed by border-bottom-right-radius.

And finally, border-bottom-left-radius.

[BLANK_AUDIO]

So again, here we're adding a border radius property for

each corner of our div.

So now, let's assign a value to each of those four corners.

The border values we assigned can be any length unit, or a percentage.

So first, we're going to set our border-radius with pixel units.

So, let's set the border top left radius value to 50px.

And let's set the top right radius value to 10px.

And we're also gonna set the bottom right radius to 50px,

and the bottom left radius to 10px.

[SOUND] All right, so let's save our style sheet.

Go back to the browser, and when we refresh the page,

notice how the top left corner has a wider border radius of 50 pixels,

while the top right radius is smaller at 10 pixels.

Then, once again,

we have a 50 pixel bottom right radius and a 10 pixel bottom left radius.

And notice how the top border styles also follows the curve of the border-radius,

as all border styles will.

Now if we don't want to type all these values individually,

like most CSS properties, there is also a shorthand property for border-radius.

And most of the time, this is the property we're gonna use in a project.

So instead of writing the four separate declarations,

we can simply use the border-radius property.

And the order values in the border-radius shorthand property also follows that

same clockwise order used for the padding and margin shorthand values.

So the first value applies to the top left corner, so let's again make it 50 px.

And the next one applies to the top right corner.

We're gonna make this one ten px.

And the next value applies to the bottom right border,

which we'll again set to 50px.

And finally, the fourth value is applied to the bottom left border,

which we'll again make 10px.

And once again, everything should still look exactly the same way.

Which it does,

we're just now defining it with the handy border-radius short hand property.

And we could actually shorten this value even further, since the top left and

bottom right values are the same, and the top right and

bottom left values are also the same.

So instead of the four units, we can actually shorten

this down to 50px and 10px, and nothing changes.

And if we want to set an even border-radius for

each side of our div, we'll simply need to define one value.

So instead of these two values,

let's define an all around border-radius value of 25 px.

So when we take a look at it again,

you can see how each side has a 25 pixel border-radius.

Again, this is probably the most common way you'll use the border-radius property.

You'll only use one value to set an even border-radius all around.

Like most values that accept a length unit,

we're also able to define a border-radius using Ms and percentage units.

But keep in mind that when we use a percentage unit for

border-radius, the percentage value refers to the dimensions of the element.

So if we change the border top left and border bottom right values to 100%,

notice how the rounded corner takes up

100% of the top left and bottom right corners of our div.

So as we can see,

border-radius with percentages can create some interesting shapes.

So for instance, we'll go back to our border-radius value.

And let's give it an all around border-radius value of 50%.

So when we save our style sheet and

refresh the page, notice how the result is an oval-shaped border-radius all around.

And if we want to create a perfectly round circle, well the width and

the height of the element need to be the same.

So for instance, let's add a width value of 500px.

And let's add a height value of 500px as well.

And we'll keep the border-radius at 50%.

So, when we go back and

take a look, we can see that the result is a circle-shaped div.

Now, border-radius 50% is also commonly used to

create rounded images in our design.

We can do it with CSS without having to rely on an image editor, like Photoshop.

So for instance, I'll scroll up to the image rule in our style sheet.

And I'll paste in the border-radius 50% declaration, and when we refresh the page,

notice how our images take on that circular or elliptical shape.

But this doesn't really fit our design.

So moving forward, let's set a smaller border-radius of 10 pixels for our images.

So we're gonna change the value from 50% to 10px, and let's scroll down and

do the same for our wildlife div.

So, down in our layout styles in the wildlife rule,

we're going to remove the width and height styles.

And let's set the border-radius to 10px.

Right, so let's take a look.

I think that looks much better, so let's stick with this moving forward.