Do you want to make rounded borders or rounded backgrounds? If yes, then, you have to learn about –moz-border-radius property and its equivalent CSS3 property. Very much similar to border-radius property in CSS3, the Gecko shorthand—moz-border-radius—can be employed when no borders have been defined.

Technically, the –moz-border-radius property allows you to make corners with varying radius. The CSS3 property equivalent on the contrary defines all the four corners all of the same size. Nevertheless, CSS3 property allows your make elliptical rounding through specifying two values. You can actually specify the per corner radius using the CSS3 version of this property by utilizing specific properties like border-top-right-radius.

The Gecko version lets you do these things:
• -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)

The Gecko has one disadvantage. It does not let you make elliptical rounding, that is. 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.

Let’s have the following rule:
.test{
background-color: #ffffcc;
-moz-border-radius: 10px 30px;
border-radius: 10px 30px;
border: 1px solid #000;
padding: 10px;
}

It is noteworthy that the code expressed above would create different results per browser. But CSS3-eanbled browsers would produce a corner that has 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

Given this fact, it is highly advantageous 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.
Here’s how:
.test{
background-color: #ffffcc;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
}

As result, the code will generate something like Figure 2 which has horizontal radius of 10px and a vertical radius of 10px.

Figure 2. Equal radius for both properties

The rule of thumb now is that by using methods that are in line with CSS3 specifications we can have greater batting average that the sites that will incorporate this property will be given bigger chance of compatibility n the future.

Tags: The -moz-border-radius CSS Property