-moz-border-radius (CSS property)
Example
This rule applies rounded corners to
the .test element:
.test{
-moz-border-radius: 10px;
}
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.
–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.
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.
Safari 3 supports the -webkit-border-radius
property and seems to follow the CSS3 specifications for the
border-radius property.
Value
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 repeated to fill the remaining values.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | None |
| 2.0 | None | |
| 3.0 | None | |
| Opera | 9.2 | None |
| 9.5 | None |
This is a proprietary Mozilla extension to the CSS standard.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

