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;

Answer 1

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.¹

---

¹ _{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.}