Table of CSS3 border-radius Compliance
border-radius seems to be a hot topic these days, what with CSS3 including it and some broswer vendors already implementing it. I just think it looks nice.
I found conflicting information when I was out there researching how best to use border-radius so I finally sat down and wasted way too much time coming up to speed on the current state of affairs. Even after many readings, some of the wording in the proposed specification can be confusing. I’ve done my best to get things right here. In the table below, it is assumed you include the prefix for each vendor on each property, e.g., -webkit- for Safari.
The WebKit team has written all the code to draw the borders, but then left out the afternoon of coding required to parse the shorthand strings and convert them to the fundamental properties. Especially odd because the parts they haven’t done are the ones everyone already agrees on.
This Just In: since WebKit is open source, I downloaded the latest source and compiled it up. I’m happy to report that border-radius (with no prefix) works! I haven’t the slightest idea how features move from the current development build to the actual Safari release, but it’s on the way. Please note, however, that in these builds -webkit-border-radius and border-radius do not always work the same way. CSS that uses the -webkit- prefix will continue to work the way it does now, but the regular border-radius: will match the spec.
I would advise that coders put the generic border-radius last so the standards-compliant instructions can override any out-of-date vendor-specific code.
Opera and border-radius: Word on the street is that the upcoming Opera 10.5 will support border-radius as defined in the spec. The pre-alpha build released December 22, 2009 (which sounds like it is loaded with yummy enhancements) renders most of the table correctly, with no prefix. (Some of the thick-border cases have odd quirks that I am confident will be ironed out before an official release.) I’m not going to add a column for Opera yet, as the current 10.5 release is really, really unstable. (Thanks, Jorge, for the tip!)
I used SVG graphics to create most of the images for the specification column. That way I was able to type in the exact drawing commands based on my interpretation of the spec. The graphics are my own work and any errors are all my fault.
It seems to me that once svg graphics are in a browser and up to speed, borders are just another way to describe the drawing instructions. On a related note, Internet Explorer will begin implementation of CSS3 in the year 2054. (I’m kidding!) (mostly)
So here’s the table. I’ll try to remember to update this as new browser releases come out, but you can help too! If there are interesting cases that should be in the table, or if I’m slacking and browser support has changed, please drop me a note!
| property definition | CSS3 Specification | Webkit (Safari 4.0.4, Chrome 3.0.195.24) with -webkit- prefix |
Mozilla (Firefox 3.5.7) with -moz- prefix |
your browser |
|---|---|---|---|---|
| border-radius: 15px; |  |
|
|
|
| border-radius: 20px 10px; |  |
 |
|
|
| border-top-left-radius: 20px; |  |
|
|
|
| border-top-left-radius: 40px 20px; |  |
|
|
|
| border-radius: 20px 10px 5px 30px; |  |
 |
|
|
| border-radius: 20px / 10px; | |
|
|
|
| border-radius: 20px 10px / 20px 10px; | |
|
|
|
| border-radius: 20px 10px 5px 15px / 10px 25px; |  |
|
|
|
| border-top-left-radius: 20px 10px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 5px 10px; border-bottom-left-radius: 15px 25px; | |
|
|
|
| border-radius:50%; |  |
|
|
|
| border-left: solid 20px;
border-top: solid 20px;
border-top-left-radius:40px; /* radius is applied to outer edge of border */ |
 |
|
|
|
| border-left: solid 30px;
border-top: solid 30px;
border-top-left-radius:20px; /* radius less than border thickness */ |
 |
|
|
|
| border-left: solid 4px;
border-top: solid 30px;
border-top-left-radius:20px; /* radius less than thicker edge */ |
 |
 |
|
|
| border-left: solid 4px;
border-top: solid 15px;
border-top-left-radius:30px; /* radius greater than thicker edge */ |
 |
 |
 |
|
| border-top: solid 15px;
border-top-left-radius:30px; /* thick edge on top, no border on side */ |
 |
 |
 |
|
| border-top-left-radius: 120px 60px;
border-top-right-radius: 120px 60px;
border-bottom-right-radius: 20px 20px;
border-bottom-left-radius: 20px 20px; /* top horizontal radii add up to 240px, four times the width of the div. Therefore ALL radii are divided by four. */ |
 |
|
|
|
| border-top-left-radius: 200% 100%;
border-top-right-radius: 200% 100%;
border-bottom-right-radius: 33% 33%;
border-bottom-left-radius: 33% 33%; /* top horizontal radii add up to 400%, therefore ALL radii are divided by four. */ |
|
|
|
|
| border-left: dashed 2px; border-top: dashed 2px; border-top-left-radius: 40px 20px; |  |
|
 |
|
| border-left: solid 15px blue; border-top: solid 15px red; border-top-left-radius: 50px 25px; |  |
|
 |
|
| border-left: solid 30px blue; border-top: solid 30px red; border-top-left-radius: 40px/20px; |  |
 |
Border is drawn in a way that does not match the proposed specification.
Current release of Safari and Chrome are wrong, but latest builds at webkit.org perform correctly (when used without the ‑webkit‑ prefix). Google Chrome version 4 (still in beta) displays these correctly.
Border is drawn correctly but property name is different. Specifically, Mozilla specifies individual corners differently. Web designers should use the different syntax with the understanding that it will be obsolete later. Later rows in the table assume you understand that Mozilla is different.
Technically wrong, but not by much. Considering the things that the draft doesn't specify, the angle of the line between the colors seems pretty minor. The spec also "recommends" a gradient. NOTE: I am reviewing this right now; I suspect that Webkit is also subtly wrong. The spec uses English to describe a complex geometric relationship, rather than using math. There are several places they could have removed ambiguity and made compliance easier just by using numbers rather than words.
These two rows are exactly equivalent in terms of the CSS3 specification. I color-coded the values to indicate how the browser should expand the shorthand into the longhand.
The CSS3 draft merely says the transition between borders of different thicknesses be smooth, so although the Mozilla implementation does not match the illustration in the spec (it uses an elliptical curve on the interior where the illustration in the draft uses a circular curve), it is probably compliant. Web developers note that they cannot rely on inner borders looking exactly the same between fully-compliant browsers.
Copyright ⓒ 2009 Jerry Seeger
All Rights reserved until I get that creative commons thing figured out.
Boy, I tell you, being able to type the drawing instructions into an SVG graphic file sure made drawing the exact images a lot easier. Too bad I couldn’t use the .svg images in the page. *cough*InternetExplorer*cough*
[...] Until more browsers begin to support CSS3, these options are a good way to increasing backwards compatibility with pure CSS. If you’re wondering how specific browsers handle the specification, this table has the results organized nicely. [...]
[...] This post was mentioned on Twitter by Cala, Alexey Simonenko. Alexey Simonenko said: Отличия реализации #CSS3-свойства border-radius в текущих браузерах: http://bit.ly/KUxXM [...]
Very interesting.
By the way, in the 3rd and 4th row I think it should be:
top-left
while it is now:
top-right
Ameen
You are quire correct. I never was that good at left and right. (Don’t even ask about the alphabet.) I’ll fix that right now. Thanks!
thank you, very complete guide
Here’s one that’s always bugged me: http://www.flickr.com/photos/bobthecow/4046038689/
Interesting. I’ll look into that. Looks like a useful addition to the table. Tanks!
I wonder if my not setting a background color in the divs above has hidden other problems as well. I’ll have to experiment a bit. Thanks once again.
Updated to Firefox 3.5.4. No changes that I could detect; I checked for support of non-prefixed standard border-top-left-radius but no change there either.
[...] Web | Table of CSS3 border-radius Compliance Vía | CSS [...]
What a great compat. table! It should be noted that Chrome 4b’s webkit (on Mac) get’s nearly everything right, except the 3 thick-thin tests towards the bottom.
Nice to hear the Webkit development stuff is getting closer to the mainstream.
[...] Table of CSS3 border-radius Compliance Tableau du support de la propriété CSS 3 border-radius [...]
[...] Table of CSS3 border-radius Compliance [...]
[...] Table of CSS3 border-radius Compliance – Es ist an der Browser-Front noch viel zu tun bis man von wirklich umfassender [...]
Interesting overview, thanks!
One minor issue: your sidebar hides the table partly – can you reduce the width somehow?
If you look at the css for this page, you will see the class ‘fatass’. I tried to make the table skinnier, but I didn’t want line breaks in the code fragments, and I wanted the pictures to be big enough to be useful.
When I make my window thinner, though, the sidebar does not overlap the main table, and I’m surprised it did for you. What browser are you using?
Good overview, but the same thing happens for me in all my browsers:
- Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
- Google Chrome 3.0.195.33
- IE 8.0.6001.18821
- Safari 4.0.4 (531.21.10)
It’s affecting the table with id=”corner_table”
Thanks – it’s something to do with the preformatted setting I used for whitespace. I have no idea why the line breaks are not being respected on some browsers (all except the one I normally use). I’ll fiddle with it and get things working.
[Edit] to be specific, single line breaks were working, while two consecutive line breaks were ignored (Except in Safari for Mac). Everything should be fine now.
[...] em CSS transformando cantos de div em bordas com cantos arredondados. « [...]
[...] This post was Twitted by indie_preneur [...]
Opera has gone the plain border-radius way, as you can check in their latest builds available in http://my.opera.com/desktopteam/blog/
It’s still pre-alpha quality, but comes with lots of goodies http://my.opera.com/ODIN/blog/opera-10-5-pre-alpha-build-released-here-is-whats-new
Very exciting! Thanks!
You’ve commented in the blog that you won’t add this until it’s a stable release, but for any passers by reading this blog, all examples match the CSS3 Spec perfectly in Opera 10.5 except for /* radius less than border thickness */ and /* radius less than thicker edge */ which both look really bizarre in Opera.
Screenshot: http://files.myopera.com/lucideer/files/border-radius.png
They look somewhat similar to some effect you might expect to get using SVG paths actually…
I expect they are using their SVG library to draw the borders, and with just a little more tweaking they will have it all correct. Hooray Opera! If they do a really good job I won’t need to add a column to the table. No telling how long it will take them to get 10.5 even to beta, though.
I really should have thought of putting a link to a screen shot at least, and now you’ve saved me the trouble. Thanks!
WebKit has some pretty ugly hacks in their border-drawing code and eventually I think they are going to have to redo large parts of it. At that point I wouldn’t be surprised to see SVG in use there as well. Ellipses are much easier with SVG than with the ‘native’ WebKit path api.
[...] Так как CSS3 ещё не является утвержденным стандартом, то браузеры используют собственные методы скругления. Чтобы понять специфику скругления каждым браузером, приводим таблицу: [...]
[...] Table of CSS3 border-radius Compliance (visual illustration) Possibly related posts: (automatically generated)Best Collection of CSS Rounded Corners Tutorials This entry was written by Gnocchi, posted on January 7, 2010 at 10:24 pm, filed under CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « CSS: text shadow [...]
Here’s some more issues with border-radius implementations not adhering to spec if anyone’s interested: http://frans.lowter.us/test/2010/border-radius/
Ooo, nice! I was thinking about investigating that stuff. If it’s all right with you, I’d like to borrow some of your effort to add clipping to this table, although your link shows it much better than the little cells of my table could.
I’m curious how content clipping works with dashed borders as well.
“If it’s all right with you”
Sorry, but I can’t take credit for finding the bugs linked above. That goes to Frenzie: http://my.opera.com/community/forums/topic.dml?id=374341
Nice work!
Altough I would also love to see percentage border-radii tested, e.g.:
border-radius:50%;
The above would effectively draw a circle (or ellipse, for that matter)
Also, maybe you could include Opera 10.5 (pre-alpha at the time writing) in the tests?
Thanks again!
Sure enough, percentages are in the spec. I’ll play with those; there are a couple of edge cases I’m curious about.
Opera 10.5 is discussed above (there’s a link to a screen shot in the comments), and by the time it reaches beta I’ll have to figure out how to make this table even wider – unless they do such a good job I can make the first column “the spec and Opera”. Here’s hoping…
Good call on the percentages. WebKit does not even have them implemented in the nightly builds yet.