Home : Table of CSS3 border-radius Compliance

Table of CSS3 border-radius Compliance

Content last updated Aug 17, 2011 – First impression of Firefox 6.

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 originally created this table to see how the various browsers acted, but it’s also a very useful table of examples of how to use border-radius in your designs. 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.

The top half of this table is looking pretty good these days, if you ignore the elephant in the room whose name will not be mentioned (until later). Eventually this page will be a syntax reference instead of a compliance table. That will be a Good Thing.

Safari and Chrome
Big news, everyone! Safari 5 is out and has caught up with Google Chrome. And with Safari 5.1 we finally have support for expressing the radii as percentages.

If you do not need to support older versions of Chrome or Safari (and Apple’s Software Update will make sure Safari 4 goes away very quickly), then the -webkit- prefix is a thing of the past!

Firefox 3
As of Firefox 3.6.3, it is still necessary to use the -moz- prefix. More importantly, the syntax for specifying individual corners is different for Mozilla. I tested to see if the latest might also accept the syntax from the spec, but it did not. For the time being I believe it’s better to use the shorthand to specify the different corners. That way your CSS markup will be the same as the standard except for the -moz- prefix.

Firefox 4 and 5 and… 6?
Firefox 6? Really? Are we suddenly in a rush to bigger version numbers? Anyway, no big change since Firefox 4. I’m going to add some new tests, but I won’t go back and fill in old browser versions. At first glance, at least, FF6 = FF5 = FF4.

The biggest news with Firefox 4 is the move to the standard CSS for specifying individual corners. Hooray! It will still accept the old -moz-wrong-order prefixes, but going forward Firefox will be playing well with others. Firefox worked out a couple of other kinks as well, and is looking pretty good overall.

Opera
Opera 10.5 has border-radius and it’s pretty complete. There are a couple of odd bugs that make me think they just need to look at this page and their programmer will slap his head and say “d’oh!” and all will be well in the next release. [Note: Opera 10.6 still has those bugs.]

Internet Explorer
Wow! Internet Explorer 9 beta has, as of this writing, the best border-radius support of any browser. It will be a good day when we don’t have to support Internet Explorer 8 anymore.

Other notes
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.

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!


Select the browsers to include in the table:









property definition CSS3 Specification IE 9 Opera 10.6 Safari 4
Safari 4
with -webkit- prefix
Webkit
Safari 5.1
Chrome 12.0.742.122
Firefox 3.6.3
with -moz- prefix
Firefox 4 & 5 your browser
with prefixes
your browser
standard CSS
border-radius: 15px; std-br-15 std-br-15 std-br-15 std-br-15 std-br-15 std-br-15 std-br-15
border-radius: 20px 10px; moz-br-20-10 moz-br-20-10 moz-br-20-10 std-br-20-10 moz-br-20-10 moz-br-20-10 moz-br-20-10
border-top-left-radius: 20px;

/* -moz-border-radius-topleft */
std-t-r-20 std-t-r-20 std-t-r-20 std-t-r-20 std-t-r-20 std-t-r-20 std-t-r-20
border-top-left-radius: 40px 20px; std-t-r-40-20 std-t-r-40-20 std-t-r-40-20 std-t-r-40-20 std-t-r-40-20 std-t-r-40-20 std-t-r-40-20
border-radius: 20px 10px 5px 30px; std-br-20-10-5-30 std-br-20-10-5-30 std-br-20-10-5-30 std-br-20-10-5-30 std-br-20-10-5-30 std-br-20-10-5-30 std-br-20-10-5-30
border-radius: 20px / 10px; std-br-20-10 std-br-20-10 std-br-20-10 box std-br-20-10 std-br-20-10 std-br-20-10
border-radius: 20px 10px / 20px 10px; moz-br-20-10 moz-br-20-10 moz-br-20-10 box moz-br-20-10 moz-br-20-10 moz-br-20-10
border-radius: 20px 10px 5px 15px / 10px 25px; std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 box std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25
border-top-left-radius: 20px 10px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 5px 10px; border-bottom-left-radius: 15px 25px; std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25 std-br-20-15-5-40_10-25
border-radius:50%; box
border-left: solid 20px; border-top: solid 20px; border-top-left-radius:40px;

/* radius is applied to outer edge of border */
std-tl40_TL20 std-tl40_TL20 std-tl40_TL20 std-tl40_TL20 std-tl40_TL20 std-tl40_TL20 std-tl40_TL20
border-left: solid 30px; border-top: solid 30px; border-top-left-radius:20px;

/* radius less than border thickness */
std-tl20_TL30 std-tl20_TL30 opera-tl20_TL30 std-tl20_TL30 std-tl20_TL30 std-tl20_TL30 std-tl20_TL30
border-left: solid 4px; border-top: solid 30px; border-top-left-radius:20px;

/* radius less than thicker edge */
std-tl20_T30-L4 std-tl20_T30-L4 opera-tl20_T30-L4 wbk-tl20_T30-L4 std-tl20_T30-L4 std-tl20_T30-L4 std-tl20_T30-L4
border-left: solid 4px; border-top: solid 15px; border-top-left-radius:30px;

/* radius greater than thicker edge */
std-tl30_T15-L4 moz-tl30_T15-L4 moz-tl30_T15-L4 wbk-tl30_T15-L4 std-tl30_T15-L4 moz-tl30_T15-L4 moz-tl30_T15-L4
border-top: solid 15px; border-top-left-radius:30px;

/* thick edge on top, no border on side */
std-tl30_T15-L0 std-tl30_T15-L0 std-tl30_T15-L0 wbk-tl30_T15-L0 std-tl30_T15-L0 moz-tl30_T15-L0 moz-tl30_T15-L0
border-left: solid 20px white; border-top: solid 20px white; border-top-left-radius:40px;

/* border lighter than div's background */
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. */
std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5
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. */
std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 box std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5 std-br30-30-5-5_15-15-5-5
border-left: dashed 2px; border-top: dashed 2px; border-top-left-radius: 40px 20px; std-tl40-20_dashed std-tl40-20_dashed std-tl40-20_dashed std-tl40-20_dashed std-tl40-20_dashed moz-tl40-20_dashed moz-tl40-20_dashed
border-left: dotted 10px; border-top: dotted 15px; border-top-left-radius: 40px 20px; opera-tl40-20_T15dot-L10dot opera-tl40-20_T15dot-L10dot webkit-tl40-20_T15dot-L10dot webkit-tl40-20_T15dot-L10dot moz-tl40-20_T15dot-L10dot moz-tl40-20_T15dot-L10dot
border-left: solid 15px blue; border-top: solid 15px red; border-top-left-radius: 50px 25px; Who the heck knows?
Click to see my attempt at interpreting the spec.
moz-tl40-20_Tred-Lblue moz-tl40-20_Tred-Lblue wbk-tl40-20_Tred-Lblue wbk-tl40-20_Tred-Lblue moz-tl40-20_Tred-Lblue moz-tl40-20_Tred-Lblue
border-left: solid 30px blue; border-top: solid 30px red; border-top-left-radius: 40px/20px;

NOTE: I have been working on an implementation of border-radius here that addresses most (but not yet all) of the errors browsers encounter. It's a work in progress so it might be broken at any given moment, but it's not to shabby. I've made no effort to test this on various browsers.

Border is drawn in a way that does not match the proposed specification.

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.

Note:

I recently updated my “Who the hell knows?” page. I added a section on how I think the standard should be for defining the transition between two styles at a curved corner. While I was at it, I corrected a couple of errors in the formulas as they were printed on the page. My interactive demo actually outperforms all current browsers for solid borders. The new section is really pretty slick!

Firefox 3 note
I should have tested with the latest Firefox 3 (3.6.12, I think) before chucking it off my computer. I’ll probably go back and test it at some point, or if anyone out there wants to check and give me an update, that would be great!

More on Webkit (Safari and Chrome)
The overhaul I said was necessary has happened. I don’t know if my test thingie helped them or not, but some very smart people went in and made things a lot better. Still waiting for dots, though…

Are you a Web developer looking for work in Cupertino? Contact me!

Copyright © 2009 Jerry Seeger
All Rights reserved until I get that creative commons thing figured out.

90 Responses to “Table of CSS3 border-radius Compliance”

  1. Vote -1 Vote +1
    Anon
    says:

    I noticed Chrome finally honoring borders with different widths (radius wise) a little while back. It’s a lot better, but still not correct in a way that the graphics (for Webkit) here do not capture.

    For my experience anyway. In FF things are nice. But in Chrome with a zero-width left border, and a 2px width top border. Round corner, 2em radius (29.9px computed font size) the transition stops half way and does not come to a natural subpixel taper. No other effects are applied. It may just be an anti-aliasing situation / lack thereof. Windows 7.

  2. Vote -1 Vote +1
    abdussamad
    says:

    Where is the table???

  3. +1 Vote -1 Vote +1
    Brian E
    says:

    This and other pages on this site are no longer viewable in IE due to a dangling conditional comment.

    The comment is related to the flash content on the page.

    I wanted to check support in IE, but can no longer do so.

  4. [...] Table of CSS3 border-radius Compliance Tableau du support de la propriété CSS 3 border-radius [...]

  5. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  6. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  7. [...] anything translucent and doesn’t work with combination of CSS3 shadow property. Looking at this table will help you understand the CSS3 border-radius Compliance.Reference URLSummaryUsing CSS3 can be [...]

  8. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  9. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  10. [...] September 21st, 2012 Boom goes the dynamite.Some time ago, a big-time Web-design site linked to my table of border-radius compliance. There was a huge rush to this humble bastion of the information age, and my host at the time, [...]

  11. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  12. [...] width, padding, etc.) above can be modified to suit your blog needs. Examples of the possibilities: one, [...]

  13. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

  14. [...] compliance table for all major browsers (latest versions at the time or writing this entry). Click here to see a very nice compliance [...]

  15. [...] 上面这几种是比较特殊点的用法,如果大家还想通过border-radius制作更多不同形状,或者更多的应用,可以点击这里。 [...]

Leave a Reply