Description

-moz-border-radius is Gecko’s equivalent to CSS3’s border-radius property, although it differs in a few respects that are discussed below. This shorthand property allows us to specify rounded borders, or rounded backgrounds if no borders have been defined.

The main difference is that Gecko browsers prior to Gecko 1.9.1 (Firefox 3.5) do not support elliptical rounding and just specify the radius of the corner with a single value. The CSS3 property caters for elliptical rounding by allowing two values to be specified. Consider the following example:

.test{
  background-color: #ffffcc;
  -moz-border-radius: 10px 30px;
  border-radius: 10px 30px / 15px 25px;
  border: 1px solid #000;
  padding: 10px;
}

The above code would produce different results in different browsers. CSS3-capable browsers would apply a horizontal radius of 10px and a vertical radius of 15px to the top-left and bottom-right corners; a horizontal radius of 15px and a vertical radius of 25px to the top-right and bottom-left corners . Gecko browsers prior to 1.9.1, on the other hand, will display top-left and bottom-right corners with a 10px radius (horizontal and vertical radii), and top-right and bottom-left corners with a 30px radius, as is shown in Figure 1.

To avoid differences it would be sensible for the time being to omit the values after the slash and the corners would render the same in all capable browsers.

It’s possible to specify the radius of individual corners in the CSS3 version of this property using more specific properties such as border-top-right-radius. The Gecko version also allows individual corners to be set using the following properties:

• -moz-border-radius-bottomleft (rounds the bottom-left curve)
• -moz-border-radius-bottomright (rounds the bottom-right curve)
• -moz-border-radius-topleft (rounds the top-left curve)
• -moz-border-radius-topright (rounds the top-right curve)

Figure 1. Rounded corners with –moz-border-radius

Therefore, to be safe in the future, it would be wise to specify for the –moz-border-radius property, and the CSS3 border-radius properties, values that will produce the same results in both types of browsers. The following example demonstrates this:

.test{
  background-color: #ffffcc;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 10px;
}

In this case, every one of the border’s corners to which this rule is applied will have a horizontal radius of 10px and a vertical radius of 10px, as shown in Figure 2.

Figure 2. Equal radius for both properties

Using an approach that respects the CSS3 specifications ensures that we have a better chance of maintaining future compatibility than using the non-standard features of the –moz-border-radius property.

The CSS3 border-radius property will also round backgrounds so that they’re contained within the border of the element. If no border has been set, the background is still rounded, but no border is applied. Prior to Firefox 3.0 the Mozilla extension will only round background colors, not background images.

Value

-moz-border-radius does not apply to table elements when border-collapse is collapse.

This property accepts between one and four length values in the order top-left, top-right, bottom-right, and bottom-left. If less than four values are provided, the list of values is as follows:

If one value is set, this radius applies to all 4 corners. If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner. Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order. Three values: The second value applies to top-right and also bottom-left (source).

The CSS3 border-radius specification which was recently changed to allow the shorthand property to refer to individual corner defines the rules as follows:

The border-radius shorthand sets all four border-radius properties. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Compatibility

This is a proprietary Mozilla extension to the CSS standard.

As noted above both the CSS3 specification and the Gecko version have both been recently changed so it s goo to re-iterate that you should be careful when using any extension and any CSS3 properties still under consideration. In the above case the Mozilla specification and theCSS3 specification have both moved towards common ground.

dotted and dashed rounded border corners are rendered as solid.