`border-radius` support and the CSS 3 Backgrounds and Borders module

Last week, the CSS 3 Backgrounds and Borders module became a Candidate Recommendation.

That means the specification is stable. Browser vendors can implement these features without a vendor prefix if they haven’t already.

`border-radius` support

Preceding to this move from Working Draft to Candidate Recommendation: support for border-radius (and border-top-right-radius, etc.) in Opera 10.5+ (current version is 11.01), Safari 5+ and Chrome 5+ (current version — as of February 12, 2011 — is 9.0.597.102 beta).

That means this*:

div{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Can safely become:

div{
	-moz-border-radius: 10px;
	border-radius: 10px;
}

Yep. You can drop -webkit- from your border-radius properties long as you don’t mind your sexy rounded corners not appearing in older versions of WebKit-based browsers (and you’ve been able to do so since June 7, 2010).

Versions of Opera prior to 10.5 didn’t support border-radius, even with a vendor prefix. Ditto Internet Explorer 7 and 8.

Internet Explorer 9 and Firefox 4 will both support border-radius. IE9 pushed its Release Candidate February 11, 2011. Firefox 4 released its 11th beta February 8, 2011.

* But the cool, forward-thinking kids were already including border-radius, even before Opera 10.5 supported it.

http://twitter.com/seutje Steve De Jonghe

This is going to make me sound like a total douche, but here goes:
I find it rather odd that you don’t mention mobile browsers at all. A lot of those are stuck using older versions of webkit, so it might be a good idea to just keep the webkit one around for a bit longer…
I also think that you should always have had the non-prefixed one, so in my opinion, you shouldn’t be changing anything just yet.
The overhead one gets by using -moz- -webkit- and unprefixed is vastly overshadowed by the extra coverage it gives you.

Then again, if you are currently typing these manually, you really need to consider using something like SASS, which allows you to type a single line and have it expanded to 3, 4 or even 5 statements.

Also, and I’m not trying to linkbait or anything, but a lot of people don’t seem to know about http://www.css3please.com
Anonymous

You’re right. I should have mentioned mobile browsers. That’s an oversight on my part.

As I mentioned above, however, you shouldn’t drop the -webkit- prefix if you are still supporting older versions of WebKit browsers. That includes mobile.

Since border-radius is cosmetic, rather than functional, using the prefixed version is really a matter of preference.

For what it’s worth: the latest versions of Opera Mobile, WebKit, and Fennec (Firefox Mobile) beta support border-radius.
Anonymous

I haven’t found a mobile browser this didn’t work in… although I’ve only tested Android and iOS. I’d be interested to know where it failed.

http://jsbin.com/udufa4
tiffany

border-radius doesn’t work in older versions of WebKit — the version on my two year old G1, or my still functioning, three year old iPod Touch. That’s what Steve mentioned above.
Anonymous

Point taken. I wonder if it works on webOS devices…
http://twitter.com/netinspired Phil Rae

You should always use the non-prefix one in your code anyway to save you having to go back and edit old sites, e.g.

-moz-border-radius: …
-webkit-border-radius: …
border-radius: …
http://twitter.com/seutje Steve De Jonghe

with the “new” scss syntax, you can just use regular old CSS and only use mixins or variables where you want it
just feels silly to type the same thing multiple times when once should do
.foo {
@include border-radius(10px); /* DONE! */
}

I’ve also been on the fence about it for a long time, as it also felt like overkill to me and a hassle to learn, but once I got started with it, I’ve been a rather happy camper
http://twitter.com/SLCoding S&LCoding

Still waiting for Opera 11 supports gradients
http://twitter.com/mattritter Matthew Ritter

Yup. Unfortunately it can be a hassle and a lot of code to write to achieve a single effect. That’s why border-radius.com is great as well as:

http://code.google.com/p/curvycorners

for IE browsers. Curvycorners, despite the terrible name, is the easiest border-radius hack for IE to implement in my opinion…
http://twitter.com/jcDesig Jeremy Carlson

100% Concur. I assume you are using Compass and it’s css3 mondule for that? Or are you writing your own mixin? Compass has a lot of stuff built in for Sass that just saves a ton of time.
http://distorzija.in.rs Distorzija

FInally… They should remove all of the prefixes…

Tiffany B. Brown

a mish-mosh of stuff

`border-radius` support and the CSS 3 Backgrounds and Borders module