B.70. -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright

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.

The -moz-border-radius-corner properties let 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.69-moz-border-radius

B.70.1. Value

The 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.

Initial value: 0

B.70.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.70.3. Example

This style rule creates an interesting rounded shape:

.roundthing {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  -moz-border-radius-bottomleft: 25%;
  -moz-border-radius-bottomright: 50%;
  -moz-border-radius-topleft: 50%;
  -moz-border-radius-topright: 25%;
}