HTML and CSS Reference
In-Depth Information
Name
border-radius
Values:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4}
Initial value:
0
Applies to:
All elements excepttable elements where
border-collapse
is
collapse
Inherited:
No
Percentages:
Refer to the dimensions of the element's border box (see description)
Computed value:
Same as declared value
Description:
A shorthand property that defines the rounding radius for the bottom-right corner of an ele-
ment's border. The actual corners will be the height and width declared. For example, suppose
the following:
.callout {border-radius: 10px;}
Each corner of an element with a
class
of callout will have a rounding that is 10 pixels across,
as measured from the beginning of the rounding to the outer side edge of the element, and
similarly 10 pixels high. This can be visualized as if the element has 10-pixel-radius (20-pixel-
diameter) circles drawn in its corners and the border then bent along the circles' edges.
Note that, given the way the syntax is defined, if two values are supplied, the first applies to
the top-left and bottom-right corners, and the second to the top-right and bottom-left corners.
To create oval-shaped rounding by supplying one value for the horizontal radius of each
corner and a second value for the vertical radii, separate them with a slash:
