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
A CSS effect that’s seen commonly on the web is rounded corners. Depending on how it’s used, the border-radius property can do anything from applying subtle curves to the corners of a CSS button, to transforming a CSS box from a rectangle into a circle. Let’s check it out.
Further reading
A CSS effect that's seen commonly
on the web is rounded corners.
0:00
Depending on how it's used,
the border-radius property can do
0:06
anything from applying subtle curves
to the corners of a CSS button
0:11
to transforming a CSS box from
a rectangle into a circle.
0:15
Let's check it out.
0:20
The most straightforward application of
the border-radius property is to round
0:22
all four corners at once.
0:27
For example,
let's say we wanted to round all four
0:30
corners of our images by 10 pixels.
0:34
But sometimes we don't want the same
border radius applied to all four corners.
0:43
Let's use the border-radius shorthand to
round the corners of our wildlife div.
0:49
You might expect these values to
be applied in a clockwise fashion,
1:06
and that's more or less true.
1:10
But since it's the corners that we're
rounding, the first value is the top
1:13
left corner, followed by the top right,
bottom right and bottom left.
1:18
In my intro to this video,
I mentioned that it was possible to turn
1:29
CSS boxes into a circle using
the border-radius property.
1:34
I don't really have a need for
that in my layout, but
1:39
we can see how in the CSS Tricks
article on the border-radius property,
1:43
percentages are acceptable
border-radius values.
1:48
And setting border-radius
to 50% will curve all four
1:52
corners until the box becomes a circle.
1:56
Included here is a link to
an article called The Shapes of CSS,
2:01
that's a fun read.
2:05
I don't know how soon you'll need
to draw Pac-Man with pure CSS, but
2:07
it's good to know it's a possibility.
2:11
Going back to my layout,
I'd like to make my links
2:15
that have the .callout class
look a bit more like buttons.
2:18
We'll start by setting
2:23
the display property to block,
2:27
since the a element is set
2:34
to inline by default, and
2:39
styling options are more
2:44
limited on inline elements.
2:49
Our callout links now look like
rectangular buttons measuring
3:10
250 pixels wide.
3:15
And we used margin: auto to
center them within the viewport.
3:17
When it comes to rounding
the corners of these buttons,
3:23
note that we don't actually have
to make them perfectly round.
3:27
Providing two values separated
by a slash allows us to
3:31
control the horizontal and
vertical radius separately.
3:36
Here, the horizontal
curve is more extreme.
3:49
We're applying 20 pixels
of horizontal radius and
3:53
only 10 pixels of vertical radius.
3:57
If we add a box shadow to a box
with a border radius applied,
4:05
the shadow will take on the same
rounding effect as the box itself.
4:09
This shadow will be cast
3 pixels to the right and
4:26
4 pixels down, since I used
positive numbers for both values.
4:29
And has 5 pixels of blur.
4:34
As usual, I started with a not so
subtle shadow to make the effect obvious.
4:40
Let's tone that down.
4:46
That's better.
4:57
You need to sign up for Treehouse in order to download course files.
Sign up