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 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 firstname.lastname@example.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!