HTML and CSS Reference
In-Depth Information
Figure 4-40
Setting the corner radii
20px
20px
60px
140px
100px
border-radius: 20px 60px 100px 140px;
If you enter only one value for the
border-radius
property, that radius is applied to
all four corners; if you enter two values, the if rst is applied to the top-left and bottom-
right corners, and the second is applied to the top-right and bottom-left corners. If you
specify three radii, they are applied to the top-left, top-right/bottom-left, and bottom-right
corners, in that order.
To create a perfect circle,
define a square block ele-
ment with the same width
and height value, and set
the radius of all four cor-
ners to half of that value.
Elongated Corners
The CSS rounded-corner model also allows designers to create elongated or elliptical
corners by specifying two values for the radius separated by a slash
horizontal
/
vertical
where
horizontal
is the horizontal radius and
vertical
is the vertical radius (see
Figure 4-41).
