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

More...

Posted By: SGT Oddball
19 Mar 2010