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.

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.

As someone who at one time worked on IE, but no longer works for Microsoft, I was getting a bit weary of Microsoft claiming things like "ACID3 is arbitrary" and "we implement the relevant standards"

Excuses always sound lame, especially from a company with as much money as Microsoft.

Good job for getting out in front of this and finally showing how you implement at least some standards better (at least visually) than other browsers and challenging them on working together to make the standards better and more complete.

Also good job for actively monitoring your ACID3 score which shows you are working on it and taking it seriously. Better to be proud of your improvements than ashamed or in denial about your current score.

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! 🙂

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.

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.

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

Its very nice to see IE team addressing a very good problem, with a very good approach.

"…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…."

hat’s off to you guys to not name any browser to claim superiority or such pettiness, shows IE is finally maturing, in terms of standards support as well as in terms of competition. I just hope IE9 to be the fastest browser.

I am pleased to hear MS finally giving a more open attempt to do things to standards and not going off and doing their own thing.

Face it though (@searcher) XP has had its run (released 2001 its 9 years old which is a long time for a fridge let alone an OS), I know personally I purposely avoided Vista but Windows 7 is fine.

We are, however, always going to have a problem with large corporates clutching onto their old technology to save the millions it will cost to upgrade their computer infrastructure. Therefore we will be stuck with the IE6s and 8s for a while. But with this regard it also falls down on us (designers/developers) to limit our use of hacks, ‘it doesn’t look as good in IE6’ rebuttle ‘well IE6 is as old as time its not going to match exactly’ rather than adding long and complicated hack to appease. As long as it is usable and doesn’t look broken we should allow that degradation over platforms. Square borders instead of round, deal with it or get a newer browser that can. Obviously there are some hacks we can’t avoid, but keeping a short leash on it is important.

It is interesting though that other browsers have their proprietary border radius properties. I hope they don’t go the way of old MS (assuming new MS has changed its ways).

Anyway good work with the IE9 border radius, I’m liking the transitions.

(Notably though the only people that care about these things are designers, some developers and marketing execs, average Joe Public doesn’t care that you have rounded borders around the box he sometimes clicks on)

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!

Too bad all this for 30%- of the world to see. No support for XP is shooting your own foot. IE6/7/8 lives because XP lives. IE6 alone have almost that market share on my country, and it’s just a browser.

And Firefox, Chrome, Safari, Opera, support XP (and some even arcaic win2k) without a hitch, why would IE9 be specific to Vista / 7?

"It is interesting though that other browsers have their proprietary border radius properties. I hope they don’t go the way of old MS (assuming new MS has changed its ways)."

Nothing to do with the old MS way, they’re simply following the W3C recommendation to prefix vendor-specific properties (http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords). This is often used for experimental properties that have not reached the Release Candidate stage yet, as well as for properties that are not complete yet / still buggy (Mozilla won’t remove the -moz prefix for border-radius yet, because they want to fix some bugs first).

"(Notably though the only people that care about these things are designers, some developers and marketing execs, average Joe Public doesn’t care that you have rounded borders around the box he sometimes clicks on)"

Average Joe may not notice a difference, but at least he’d (consciously or not) benefit from the speed boost of having his browser round the corners, as opposed to downloading extra images to achieve the same effect.

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

Congratulations. I think you are doing an excellent job. You have your priorities which are reasonable, and you are being forthright about IE’s new development process. Both IE7 and 8 fell short of what I was hoping for, but you are catching up fast and doing so in a methodical and planned manner. (This coming from a Mac user and WebKit contributor!)

@ several commentors:

IE9 only running on Vista or above is what Microsoft SHOULD be doing. IE9 will not be released for a good while yet (more than a year I’d expect) and by that time the installed base will have shifted. They would be wasting resources supporting an OS that is no longer cutting‐edge. If you’re running an archaic OS like XP, you don’t get the new shiny toys. More fool you.

@steve

“Even more scary… if IE9 is *specifically* launching URI’s by calling "iexplore.exe" directly that’s a major No-No.”

This is exactly the sort of thing I would expect if I were using a Windows machine. Why do you act surprised?

@Nicholas Shanks: launching URI’s by calling IE 8 directly would mean a little trip in front of the EC again, due to hijacking a protocol’s default handler.

It would also be a regression.

If you write your app to link directly to ‘ie.exe’, fine – that’s your problem. We’ll see each other on the next MS Windows upgrade, when ie.exe is no longer in the PATH or not even available on the system.

If you write your app so that it lets the OS handle the URI, and the registered handler for the URI’s protocol (say, http://) is IE, then alright, clicking a link inside an application that expressly says ‘will open with your default browser’, then fine.

If your default browser is Chrome or Firefox, but clicking on a link that should be handled by the OS opens IE, then you’re not doing what you say you’re doing (it’s misdirecting, and in a case of a convicted monopolist misdirecting is dangerous), you’re not following your user’s wish (it annoys your customer) and there must be something wrong with your software (it’s a bug).

I genuinely like IE 9’s preview, I’d be sad to see it have problems later on because current bugs went unnoticed.

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.

@Mitch 74: do you really think the IE team isn’t totally aware of the implications of changing a user’s default browser settings without their explicit consent? Do you really think something like that just slipped by them?

One thing to consider: the IE9 platform preview is just that – a platform preview. It’s not a new browser. It doesn’t have to follow the rules that browsers do. The platform preview of IE9 can let whatever version of IE that’s on your machine run everytime for all the DOJ cares. When IE9 Beta 1 comes out, one that calls itself a real browser, then you can worry.

In the meantime, why don’t you find something more useful to complain about. How about Acid 3? I think more people should complain about that.

Yes I was a bit too quick with casting my aspersions about the vendor prefixes. I should have thought it through and now I am going to completely backtrack my statement… perhaps I should become a politician when I grow up. IE should be prefixing with a -ms- or -ie-, before W3C release the specification on this feature. My assumptions before would be that every browser will implement the same rendering behaviour and accept the same parameters, when we know that this is statistically improbable.

About the rounding borders… we all fall into this trap at some point but who really cares about round borders, leave them square until the browser supports it, stop being clever. Now to go through my sites and delete all the corner images *hums and walks away*.

@All moaning about lack of XP support

As for the XP comments, I stick to my guns on this, XP is old it has been superseded. You are going to upgrade at somepoint, I know it was hard letting go of your ZX Spectrum last time… but you CAN do it… I believe in you.

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.

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

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.

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.

Uh, sure you can, and companies do all the time. Particularly when there are nearly a billion users of a given product.

XP is dead. It’s not coming back. There was exactly the same gnashing of teeth when Win2k died. Statements of how XP was junk and worthless and not as good. And there’s going to be the same when Win9 phases out Win7.

There are not a billion users of Vista or Win 7. The total users of Vista and Win 7 don’t even come close to the users of XP. I work in a division of the US Government with 16,000 users. We’re all on XP and IE 7. There are no plans within the next 12 – 18 months to change either one of those items.

With security updates XP is still a viable operating system. People complaining about it not having protected mode as their main argument is a cop-out and not even a good one at that. I believe there’s even still some computer manufacturers offering XP as the pre-installed operating system.

Plus you haven’t offered a solution as to how the companies that can’t afford to upgrade or don’t have the manpower to do QA testing should proceed. If you’re going to kill off XP from these users, you should make it easy and cheap for them to move to something else, no? Or should they just download and install OpenSuse and use Firefox?

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.

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.

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.

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.