HTML and CSS Reference
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
As you'd logically expect, you can also specify two, three, or four values. For
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 ):