HTML and CSS Reference
In-Depth Information
O
NLINE
http://htmlref.com/ch6/borderradius.html
Compatibility
CSS3
Chrome 2+, Firefox 3+, Opera 9.5+, Safari 3+
Notes
• Mozilla-based browsers like Firefox define this property as
-moz-border-radius
while WebKit-based browsers like Chrome and Safari define it as
-webkit-
border-radius
.
• There is a definition in the CSS3 specification on a second set of radius values being
applied to set vertical radius pair wise with horizontal radius. Currently, the
browsers do not support this well or, in most cases, at all, and actually provide
documentation that contradicts the specification. Clearly, this is a work in progress.
• The individual corners can be specified individually using their own properties, as
shown in subsequent listings. While the CSS3 specification defines properties like
border-top-right-radius
,
there are syntax differences in early supporting
browsers, with Mozilla-based browsers supporting a syntax like
-moz-border-
radius-topright
and WebKit-based browsers supporting
-webkit-border-
top-right-radius
.
• When background images are employed, we should expect clipping to the curved
corner as shown next, but this is not consistently implemented in browsers yet:
border-top-left-radius
This property is used to round the top-left border corner specifically.
Syntax
border-top-left-radius:
horizontal-radius vertical-radius
