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?

four images of a box with a dotted border, each size has a different width. The top left box the corners are not dotted, they look solid, the top right box the dotts are more like squares and the corners are not smooth. The bottom left box there are some dots which overlap in the corners, the bottom right box the dots are smoothly spaced and transition evenly from the different widths.

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:

two boxes with solid rounded corners of different widths. The box on the left there is a sharp edge between the two borders. The box on the right the transition is smooth.

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

three boxes, with double rounded corners of different colors.

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:

a curve with a sharp line where it changes from red to blue

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