B.69. -moz-border-radius
Mozilla-based browsers (including Netscape 6 or later) support a number of nonstandard CSS properties that were implemented for the skinning engines of those browsers. These properties all begin with the prefix -moz- to indicate their nonstandard nature. Several of these properties are useful for general Web site design as well, and have equivalents in current drafts of future CSS standards.
-moz-border-radius is a shorthand property that lets you add rounded corners to the border of an element by setting the radius to use for each of the corners of the box. The content of the box is not clipped by these rounded corners, so you'll usually want to define an appropriate amount of padding to prevent overlaps. The background is clipped, however.
Inherited: No
See also: Section B.70-moz-border-radius-corner
B.69.1. Value
You can specify from one to four values for this property, separated by spaces. Each value can be a CSS length value or a percentage of the width of the element from 0% to 50%. The maximum corner radius will always be 50% of the maximum dimension (width or height) of the element. The effects of specifying multiple values are shown in Table B-7.
| Number of values | Effect on margins |
|---|---|
| 1 | All four corners receive the value specified. |
| 2 | Top left and bottom right corners receive the first value, top right and bottom left corners receive the second. |
| 3 | Top left corner receives the first value, top right and bottom left corners receive the second, bottom right corner receives the third. |
| 4 | Values are applied to top left, top right, bottom right, and bottom left corners, respectively. |
Initial value: 0
B.69.2. Compatibility
CSS Version: n/a
This property works in Mozilla-based browsers, including Netscape 6 or later, only.
Equivalent functionality is planned for inclusion in CSS3, but final property names and values are likely to differ. To follow the work on this front, see the CSS Working Group Web site.
B.69.3. Example
This style rule creates a circular element 100 pixels in diameter:
.circle {
border: 1px solid red;
width: 100px;
height: 100px;
-moz-border-radius: 50%;
}