Should we use -moz-border-radius attribute these days?

Question

I am using the W3C CSS Validation Service to validate CSS and it returned the following error: Property -moz-border-radius-bottomleft doesn't exist : 5px My question is, do we need it anymore, as modern browsers seem to understand `border-bottom-left-radius` et al. Here is the complete CSS: ``` height: 160px; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: transparent url(../images/search-box-repeat-small.png) repeat; ```

Accepted Answer

Firefox understands the standardized `border-*-radius` properties starting from version 4.

If you're going to specify an equal radius for all four corners, and you're not interested in supporting Firefox < 4.0 and other older browsers, you may as well reduce your staggering eight border radius declarations to a single one:

```
height: 160px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;
```

If you need to support Firefox 3.6 and older, you will still need the prefixed property, but specifying one for every corner is still just asking for trouble:

```
height: 160px;
-moz-border-radius: 5px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;
```

Note also that unprefixed properties should come last in a rule, so browsers that support the unprefixed properties will use it for best standards conformance.1

1 Yes, vendors do implement prefixed properties in non-conforming ways, because there is nothing in the spec that says they can't. See the Gecko notes for `-moz-border-radius` for details on what changed after Mozilla dropped the prefix.

Should we use -moz-border-radius attribute these days?

Solution

Problem