Backgrounds and Borders Module Level 3 has reached RC

On 15 February 2011, Backgrounds and Borders Module Level 3 reached Candidate Recommendation. This means that the document has been widely reviewed and is ready for implementation. W3C encourages everybody to implement this specification.

I was playing around with the latest browser versions to see how they handled border-radius and I found a few things that differ in the implementations. Especially for small radii (in this case 3px).

Tested browsers

• Firefox 3.6
• Firefox 4
• IE 9
• Chrome 10
• Safari 5
• Opera 11

Border-radius and images

None of the browsers show any problem with boxes without borders. Problems occur when trying to curve borders and images. Firefox 3.6 and Opera 11 does not apply border-radius to images. IE9 shows a clear problem: it returns a perpendicular corner with the corner pixel gone. This makes the border look “broken” rather then curved.

IE9 and Opera 11 still have problems with small border-radius

This is just a note of something I came across just now. What I find most interesting is IE9 that was released recently but fails to handle small border radii although the document reached Candidate Recommendation before the release of IE9. On the other hand you can solve it easily be making the radius 4px instead.

Firefox 4 was just released as well and has solved the issue with border-radius on images. Now we just need Opera to do the same thing.

Below are the graphical tests for each browser.

Firefox 3.6

Firefox 4

IE9

Chrome 10 / Safari 5

Opera 11