moz-border-radius (CSS property)
moz-border-radius
was Gecko’s equivalent to CSS3’s border-radius property, although it differed in a few respects. The shorthand property allowed web developers to specify rounded borders, or rounded backgrounds if no borders have been defined.
In Gecko 2.0 moz-border-radius
was renamed to border-radius
; -moz-border-radius was supported as an alias until Gecko 12.0.
In order to conform to the CSS3 standard, Gecko 2.0
- changed the handling of
values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%; - made rounded corners clip content and images (if overflow: visible is not set)
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).
Border-radius
The
border-radius
property is a shorthand property that can accept up to four values. The values represent (in order,) thetop-left
,top-right
,bottom-right
, andbottom-left
corners. As is the case with any shorthand properties that use unit values, any omitted values are inherited from existing ones.You can explicitly target individual corners of an element using the longhand syntax. For example:
.media img { border-top-left-radius: 20%; border-top-right-radius: 20%; border-bottom-right-radius: 20%; border-bottom-left-radius: 20%; }
You can see clearly why, in most cases, you’ll use the shorthand syntax. Even if you want to target a single corner, it’s much more efficient to do this instead:
.media img { border-radius: 20% 0 0 0; }