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:

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

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