HTML and CSS Reference
In-Depth Information
FIGURE 4.2
The container on the left has four values set; the one on the
right has two values set. I've not included a three-value example, because
I find it a bit pointless.
FIGURE 4.3
Setting different
horizontal and vertical radii on
a container.
As you'd logically expect, you can also specify two, three, or four values. For
example:
border-radius: 0px 0px 20px 20px;
These relate to top-left, top-right,
bottom-right, and bottom-left values, respectively.
border-radius:0px10px20px;
These relate to the top-left value, top-right
and bottom-left, and bottom-right values, respectively.
border-radius: 10px 20px;
These relate to the top-left and bottom-right,
and top-right and bottom-left values, respectively.
A couple of examples are shown in
Figure 4.2
.
Using
border-radius
, you can also specify two sets of values separated by a
forward slash to indicate separate horizontal and vertical corner radii. For example,
the following line sets every horizontal radius to 10px and every vertical radius
to 20px (
Figure 4.3
):
border-radius: 10px/20px;