Should we use -moz-border-radius attribute these days?
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;
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 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
1Yes, 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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here