This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS has properties that let us create rounded corners on elements without the need for any images or extra markup. With border-radius, we can define exactly how rounded the borders appear.
Quick Reference
The border-radius property is the shorthand property for:
.box {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 10px;
}
So, instead of writing each declaration, we can simply use the border-radius property to define the curve of each corner:
.box {
border-radius: 20px 10px 20px 10px;
}
The top-left and bottom-right values are the same, and the top-right and bottom-left value are as well. So we can shorten this further:
.box {
border-radius: 20px 10px;
}
If we want to set an even border-radius for each side, we'll simply need to define one value:
.box {
border-radius: 20px;
}
Related Articles
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
You need to sign up for Treehouse in order to download course files.
Sign up