HTML and CSS Reference
In-Depth Information
#box1 {
background-color: #006;
width: 200px;
height: 150px;
border-radius: 25px;
}
#circle {
background-color: #900;
width: 150px;
height: 150px;
border-radius: 50%;
}
In both cases,
border-radius
takes just one value, which is applied to all four corners. In the first case, a
length is used, producing an evenly rounded curve on each corner. In the second case, the
border-radius
of a
square is set to
50%
, producing a circle as shown in Figure
9-8
.
Figure 9-8.
Using border-radius with a single value applies the same curve to all corners
Using
border-radius
with more than one value is less straightforward. First let's deal with using the same
value for the horizontal and vertical radii of each curve.
Two values:
The first applies to the top-left and bottom-right corners. The second
applies to the top-right and bottom-left corners.
Three values:
The first applies to the top-left corner. The second applies to the top-right
and bottom-left corners. The third applies to bottom-right corner.
Four values:
The values are applied to each corner in a clockwise direction starting
from the top left.
It's when you want to use different values for horizontal and vertical radii that the
border-radius
shorthand
becomes mind-numbingly complex, taking 2-8 values. Unless you want to apply the same values to each corner,
it's probably much easier to use the individual properties for each corner. Still, I'll explain how it works and let
you make up your own mind.
The values for the horizontal and vertical radii are separated by a forward slash. However, you don't specify
each pair separately. All horizontal values come before the slash, and all vertical values come after. And this is
where the syntax becomes really complex—you don't need to use the same number of values before and after
the slash. So, for example, you could have three horizontal values before the slash and two vertical ones after the
slash. The rules regarding which corners the values apply to are the same as just described for two, three, and four
values.
The following styles for
#box1
using
border-radius
shorthand have exactly the same meaning as the
individual rules for
#box2
(the code is in radius_shorthand2.html):
