Do We Still Need to Use Vendor Prefixes for Border Radius?
Tools like CSS3Generator.com are useful in that they provide a GUI for getting shiny new CSS 3 into our designs, like text shadows and gradients, for example. But I’ve noticed that when it comes to the border-radius
property, they spit out a ton of browser-specific code. For 5px rounded borders, for example, you’ll typically see something like this:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
Three properties to achieve one effect. I’m not sure why the community in general isn’t making a bigger fuss over this, it’s reminiscent of marquee
style tags from the 90’s, or how Flash requires both the embed
and object
tags to get a single job done across multiple browsers. Three lines of code is bad enough, but when you start talking about having different radii for each corner, it expands to six lines (thanks to older versions of Firefox, apparently).
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 40px;
-webkit-border-radius: 5px 10px 20px 40px;
border-radius: 5px 10px 20px 40px;
Here’s the thing though, I don’t see any browsers that require these extensions anymore. The -moz-border-radius
property was for Mozilla browsers (ie, Firefox). As of Firefox 7 (at least), border-radius
is supported without the vendor-specific extension. I’m running Safari 5.0.5 and Chrome 14, and neither requires the -webkit-border-radius
property. IE 8 and below don’t support rounded corners at all, of course, which has single handedly resulted in the web as a whole being deemed “too square for the Fonzie”. But IE 9 plays nicely with rounded borders using just the border-radius
property.
So there you have it, no need to continue mucking up your code with three to six lines of code that can be accomplished in one.
Up Next: Blood Moon, October 12th, 2011