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 property allows us to specify rounded borders, or rounded backgrounds if no borders have been defined.

The main differences are that the Gecko shorthand property –moz-border-radius will allow each individual corner to have a different radius, whereas the CSS3 property defines all four corners to be the same size, but caters for elliptical rounding by allowing two values to be specified. 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)

Gecko doesn’t support elliptical rounding at all, and this is likely to be a source of confusion when defining different values for the corners using the shorthand –moz-border-radius. Gecko will see the specified values in the order top left, top right, bottom right, and bottom left. If fewer than four values are provided, the list of values is repeated to fill the remaining values. Consider the following rule:

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

The above code would produce different results in different browsers. CSS3-capable browsers would apply a corner that has a horizontal radius of 10px and a vertical radius of 30px to each corner. Gecko browsers, 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.

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. The Mozilla extension will only round background colors, not background images.