The CSS Corner: About CSS corners

The first time we used ‘The CSS Corner’ as a general blog post heading, Chris Wilson sent this feedback: “Many readers will think the post is about border-radius”. The very first comment proved him right within hours.

Today, CSS Corner is about the border-radius property, by far the most heavily requested feature of the CSS3 Backgrounds & Borders module.

A factor behind this popularity is its pervasive role in styling the ‘chrome’ of a web application. Making modern, visually attractive tabs, dialogs, custom button controls, even super-awesome button controls is much harder if the only available corner shape is square. Quite literally rounding the edges of web app UIs to give them a more polished or even desktop-app look was important enough for authors to fall back on using table layouts and images to achieve the desired effects across all browsers. A wealth of individual requirements and experimentation spawned countless blog posts, a dedicated Javascript library and even a number of jQuery plugins.

A Long Time Coming

First specified back in 2002, border-radius was already supported by Firefox 1.0 in 2004 as –moz-border-radius. Almost three years later, Safari 3.0 followed with –webkit-border-radius. In December 2009, the specification became a Candidate Recommendation. A few weeks ago, Opera’s 10.50 release was the first to add support the property without a vendor prefix. The first IE9 Platform Preview Build released at MIX 2010 also supports border-radius. Within months, a single border-radius declaration will work interoperably in all the latest browser releases.

Getting It Right

Addressing well-known use-cases is always a primary goal. But the two borders connected by a CSS box corner can also be styled e.g. using dashes or dots which should follow the specified curve. Each border may also use a different style, width or even color. Getting all the permutations right – producing the result expected by the author, as defined by the specification – across the ranges of each variable has been a particular challenge for browsers.

Consider dotted borders of varying widths with rounded corners; which of the following renderings is likely to reflect the intent of most authors?

Each blue box above is a screenshot of the same simple testcase as rendered in a different browser. IE9’s rendering is at the bottom right. (The image links to the testcase).

For a solid border of variable width with the same corner radii, IE9 gives the rendering at right:

Cross-browser agreement on the rendering of more creative border geometries enabled by this new feature remains to be achieved:

IE9’s rendering is also the rightmost above.

Future challenges include interoperable corner gradients; when a rounded corner connects border of different colors, modern browsers will typically display something like:

While the specification defines the exact position of the transition line between the color areas, an interoperable and testable definition for a color gradient along the curve remains to be defined. If you are a web author with feedback or thoughts on the matter, the CSS Working Group would love to hear from you at www-style@w3.org.

border-radius in the IE9 Platform Preview Build

Our first preview build includes full support for the property as currently defined, including shorthand and longhand syntax, as well as the corresponding DOM properties.

As CSS3 Backgrounds & Borders has reached Candidate Recommendation, the property name is not prefixed with –ms.

A Call To Action

While a number of web pages already make use of this feature, some, such as the superawesome button demo page, do not render properly in IE9 or Opera 10.50 because they lack an unprefixed declaration of the border-radius property. As the specification nears Recommendation and browser vendors are working on their final implementations and testcases for submission to the W3C, we recommend that new content always include a border-radius declaration without vendor prefix.

We are looking forward to hearing your feedback!

Sylvain Galineau
Program Manager

Comments

• Anonymous
  January 01, 2003
  The comment has been removed

• Anonymous
  January 01, 2003
  Yeah, IE definitely wins in this department

• Anonymous
  March 19, 2010
  IE definitely wins In the dotted borders case. Good job!

• Anonymous
  March 19, 2010
  Now authors are using proprietary -webkit- and -moz- extensions when IE implements the standard property :)

• Anonymous
  March 19, 2010
  Great ! This discussion will finally take place !

• Anonymous
  March 19, 2010
  The comment has been removed

• Anonymous
  March 19, 2010
  While some may call those test wonky and unrealistic - i am very glad, that MS is pushing the terms "standard" and "interoperable implementation" to new limits.

• Anonymous
  March 19, 2010
  Very nice! It will be great to have the simple cases supported at long last, and excellent to see action on driving those complex cases towards agreement. Hoping IE9 adoption is much swift — still organisations I know sticking with IE6, shame on them. I hope they don't plan to sit on IE7 or 8 for years … at least, not if they want rounded corners on their web pages! :)

• Anonymous
  March 19, 2010
  Mail about gradients resent to www-style.

• Anonymous
  March 19, 2010
  looking forward to the day when we can put vendor-specific implementations behind....

• Anonymous
  March 19, 2010
  > Hoping IE9 adoption is much swift If ie9 is not aviable for XP adoption is really slow... like IE7 or worst

• Anonymous
  March 19, 2010
  thanks,Good job! hope ie9 can as good as firefox!

• Anonymous
  March 19, 2010
  Congrats on getting this implemented. Sometimes web authors and users are a fickle lot, and while some want the latest SVG, DOM or something quite technical behind the scenes, others are just happy with the front-end visual enhancements that an implementation of border-radius can bring.

• Anonymous
  March 19, 2010
  I think the small dots in IE should be spaced a little closer together. First of all this will achieve parity between browsers, allowing web site developers to use this reliably without the design department bugging them over the spacing difference. This is a situation I actually encountered with IE’s current dots, sadly. Secondly, actually relative to their size it also makes more sense, the big dots have about a dot’s worth of space between them, whilst the small dots have more like two dots of space in between.

• Anonymous
  March 19, 2010
  Other than that by the way nothing but praise for the attention to details in implementing these cases with varying widths. It looks great!

• Anonymous
  March 19, 2010
  The comment has been removed

• Anonymous
  March 20, 2010
  Looks like transitions might become part of the standards document: http://dev.w3.org/csswg/css3-background/#corner-transitions

• Anonymous
  March 20, 2010
  @Holzel, the current language does not yet define the gradient algorithm in an interoperable, testable way. Browsers do not yet implement it either. It is the right thing to do eventually, but this area needs more design work. Most importantly, it needs author feedback and input.

• Anonymous
  March 20, 2010
  The comment has been removed

• Anonymous
  March 20, 2010
  IE9 looks like it could be the browser that we've all been waiting for from Microsoft...

• Anonymous
  March 20, 2010
  Fails: http://www.tapper-ware.net/stable/web.dom.stresstest.transform/

• Anonymous
  March 20, 2010
  The comment has been removed

• Anonymous
  March 20, 2010
  @Mila76 - XP is already in the final phase of its lifecycle, and headed for full retirement.

• Anonymous
  March 20, 2010
  @3, opacity is also in the Platform Preview build. As is rgba().

• Anonymous
  March 20, 2010
  #Time to go Is a joke ? all others browsers are still compatible with XP. in alphabetical order: Google Chrome 4.1.249.1036: Mac OSX/Linux/XP/Server 2003/Vista/Windows 7 IE8: XP/Server 2003/Vista/Windows 7 IE9 Preview: Vista/Windows 7 <---- only two OS ? fail Firefox 3.6: Mac OSX/Linux/2000/XP/Server 2003/Vista/Windows 7 Opera 10.50: Mac OSX/Linux/2000/XP/Server 2003/Vista/Windows 7 Safari 4.0.5: Mac OSX/XP/Server 2003/Vista/Windows 7

• Anonymous
  March 21, 2010
  The comment has been removed

• Anonymous
  March 21, 2010
  Apologies that post was off the point, what I meant by it is that border-radius is only supported in IE9 and IE9 is only supported in Vista / Windows 7... There's no problem here, out with the old in with the new. Microsoft playing catch up, well at least they are trying. Game on Garth!

• Anonymous
  March 21, 2010
  The comment has been removed

• Anonymous
  March 21, 2010
  @Paulo: probably because IE 9's development is planned for after XP goes into extended support phase (only security fixes). The very best we could expect is 'IE 8+', implementing IE 9's engine in software mode, inside IE 8's chrome - which should be possible, but unlikely, for strategic reasons.

• Anonymous
  March 21, 2010
  Oh, I just noticed another bug in the IE9 preview: although my default browser is Firefox 3.6, the preview considers IE 8 to be my default browser... tut, tut! That ain't no good.

• Anonymous
  March 21, 2010
  The comment has been removed

• Anonymous
  March 21, 2010
  @Mitch74 What do you mean with default browser bug? Opening a link in a different window in IE9 should still trigger IE and not a default browser. You would not expect the final version of IE9 to open links in new Firefox windows either.

• Anonymous
  March 21, 2010
  @hAl - Incorrect.  If IE9 is launching a link in another IE9 window then that is fine.  However if IE9 is launching a URI and asking windows to handle it, then the default browser (whichever it is) should be handling it. (e.g. Firefox in my case at work, Chrome at home) Even more scary... if IE9 is specifically launching URI's by calling "iexplore.exe" directly that's a major No-No.

• Anonymous
  March 21, 2010
  I hope Microsoft will start pushing out more frequent updates to IE. MSFT needs to stay competitive to the competition.

• Anonymous
  March 21, 2010
  @Steve, @Mitch: Yes, the fact that the IE9 Preview shows its Help and so on in IE is a known issue and was bugged some time ago. Thanks! @Paulo: If you (rightly) consider Win2k archaic, you'd probably consider XP archaic as well: http://en.wikipedia.org/wiki/Microsoft_Windows#Timeline_of_releases. Both releases are very nearly ten years old.

• Anonymous
  March 21, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  Searcher, don't you think you're being a little hyperbolic? When IE7 was announced and they said there was no Windows 2000 support, people freaked and prophecized doom and gloom for "abandoning" that platform. What happened? Frankly, nothing. A whimper and Win2k was gone. 5 years later (IE7 was announced in February 2005), Windows XP is in sunset phase, and you think things will be any different? XP had a long, glorious life, and it's over. With a whimper, it will be gone too. By the time IE9 is released (my guess, in 2011), it will the right time to say goodbye to XP. Let it go.

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  Dear IE Team, Your IE Test Center page is extremely dishonest. Why include the IE9 Test Platform, but omit Chromium 5, Opera 10.51, Webkit Nightly, and Firefox 3.7 Alpha?

• Anonymous
  March 22, 2010
  Dear troll, Your comment is extremely dishonest. Why imply that these score any differently? Test, and post your results.

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  The comment has been removed

• Anonymous
  March 22, 2010
  @Stuie: "IE should be prefixing with a -ms- or -ie-" They already started doing that with IE8. http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

• Anonymous
  March 23, 2010
  The comment has been removed

• Anonymous
  March 23, 2010
  <<Do you honestly think I'm a troll, just because I come into a forum, level an inflammatory accusation with no data, and change the subject when challenged?>> Yes, yes I do.

• Anonymous
  March 23, 2010
  The comment has been removed

• Anonymous
  March 23, 2010
  Clarification on whether or not border-radius should be prefixed with -ms, and why it's not: the CSS WG recommends implementing properties without a vendor prefix once a specification reaches Candidate Recommendation. (http://www.w3.org/TR/css-beijing/#experimental) CSS3 Backgrounds & Borders is CR since December 2009. Both Opera 10.50 and IE9 implement the properties without prefix.

• Anonymous
  March 23, 2010
  I have been looking for this article everywhere!  Time to make some round corners!  =)

• Anonymous
  March 23, 2010
  The comment has been removed

• Anonymous
  March 23, 2010
  "I thinks XP have more than 4/5 year of life. Why XP user can't have first class browser from Microsoft?" Have you read the above posts? XP is now 7 years old. Most XP computers are probably on their way out soon anyway. It isn't like many of these features will be used in websites for quite a while anyway - we still have people on IE6! Eventually we won't have to worry about these older browsers and we can actually use these features on websites, but for the next few years IE9 won't really have any advantage.

• Anonymous
  March 23, 2010
  It would probably be a good idea to release an IE 8.1 or IE 8.5 to XP users, with some of the CSS improvements and SVG backported.  But it is reasonable to restrict the full IE 9 to people with a modern operating system.

• Anonymous
  March 23, 2010
  >XP is now 7 years old No, XP is now 9 years old. Anyone out there using a 9 year old laptop?  Cell phone? MP3 player? No, I didn't think so.

• Anonymous
  March 24, 2010
  @Matt... There are still a lot of business that can't afford the capital investment of upgrading.  There's also a lot of businesses that don't have the manpower to go through testing a new os with their applications.  XP with SP3 runs just as well as anything else.  Why should people be forced to upgrade?  If there were only a few thousand XP users I'd agree, but there are probably still millions of people using XP.  Should those people be penalised because they don't want or can't go to Win 7?  The best solution would be to create an IE 8.5 with the engine mods backported but skip all the Direct2d stuff, but I doubt that would happen. You can't just ignore millions of users.  Sorry, but you can't.

• Anonymous
  March 24, 2010
  The comment has been removed

• Anonymous
  March 24, 2010
  The comment has been removed

• Anonymous
  March 24, 2010
  The comment has been removed

• Anonymous
  March 24, 2010
  I never said -we- wanted IE 8.5, or 9, or whatever.  OTHER people might.  Those people may want to remain on XP.  Those people may be more comfortable with the operation and familiarity of an OS they've used for several years but also want websites to work properly.  Why should they be denied some, if not all, of the enhancements IE 9 will offer just because they don't want to move off XP?  You're still avoiding the topic of how to deploy resources you don't have.

• Anonymous
  March 24, 2010
  Let XP go peacefully. Please do not hold back technology. These companies using XP now had 9 years to make some money for an upgrade. This is a gutsy move by MSFT and really a necessary one. Creating bridges from one technology to another is just a waste of time and resource.

• Anonymous
  March 24, 2010
  The best way to force people to upgrade is to supporting them.  I stopped supporting IE6 on my websites a few months ago and I think it's great that IE9 won't support XP.  If people are ok with using old versions of operating systems then they should be ok using old versions of browsers.

• Anonymous
  March 24, 2010
  stop supporting* Also, it's great to see progress being made on rounded borders.

• Anonymous
  March 24, 2010
  I suggest: Internet Explorer 10=IE9+virtual pc virtual pc the same as svg tag. the virtual pc provide a MiniWin OS(like windows XP) which can: 1 a regulation for auto downloading and running win32 exe,dll form IIS. 2 for each web app,give a proper sandbox for security. 3 communication with other common web page. 4 isolated virual disk,virtul memory for each web app(exe,dll) <virturlpc exe_url="nodepade.exe" virtual_path="C:Winows" cpu="1" memory="10MB" />

• Anonymous
  March 24, 2010
  Huzzah, another reason to move people off XP! I'm really surprised no one is mentioning the obvious - capital expenditures by corporations and governments declined because of the recession. This means that there is a lot of old equipment out there running older software of all kinds, and there is also pent up demand. As balance sheets improve (note - this also applies to households, not just companies), IT purchases will increase. And they won't be putting XP or Vista on those new machines. It will be Win 7. By the time IE9 (btw, awesome job, IE Team) is a finished product, IT purchases will be in a clear upswing. As an added bonus, the retirement of XP boxes in the enterprise means that IE6 WILL be retired as well. It may never fully go away due to legacy apps running in VM instances, but there will be increasingly powerful incentives to move to IE8/9.

• Anonymous
  March 25, 2010
  As webdeveloper we are really happy to hear such news! I would be really happy to show my clients work in IE instead of other browsers!

• Anonymous
  March 25, 2010
  There are still thousands of Netbooks and similar being sold with XP on them every day - how does that make it a dead OS?

• Anonymous
  March 30, 2010
  So IE9 won't be available for Windows XP? Well, that doesn't bother me at all. I'll just carry on using Firefox. :)

• Anonymous
  March 31, 2010
  The comment has been removed