One of CSS3’s most popular features is border-radius. The ease of just being able to specify your rounded corners in CSS is very appealing compared to using JavaScript or a bunch of bloated HTML to accomplish a simple effect. So here I will describe a CSS-only method we can use today that works in all four major browsers. Sadly, this does not include Internet Explorer, so I will include an alternative solution for it too.
An update to the “When can I use” page, now you can filter by spec status. This is helpful to only see support for full W3 recommendations, mostly stable specs, features still in flux or completely unofficial features.
I find it interesting to see that with IE8 Microsoft has focused largely on improving items under “candidate recommendation” status (primarily CSS 2.1), whereas most full recommendations (XHTML, SVG, MathML) get ignored. Working draft features seem to only be added when the spec is pretty clear cut, such as the querySelector one.
The “When can I use…” page now makes URLs based on selections. For example, I made the following links:
Just selecting the options at the top of the page will immediately generate the URL.
I have created a test page to determine how current web browsers deal with SVG in HTML, using an SVG file as an OBJECT element, an IMG element, or as CSS background.
My main purpose for this was to discover the limitations of Webkit’s ability to display SVG files as CSS backgrounds, after which I thought it might be helpful to show the other methods too.
Here is the SVG test page.
Currently, only Opera 9.5+ is able to render all the instances correctly.
Webkit (Safari, Chrome) appears to only be able to display SVG as CSS backgrounds under the following conditions:
Similar restrictions exist for images.
There doesn’t appear to be a specification that states how SVGs should be handled in CSS backgrounds, so technically there’s nothing that says that Opera’s more flexible rendering is any more correct than Webkit’s. However, having more restrictions than it does on regular images seems odd. Tiling the image, for example, is not possible in Webkit.
Hopefully Webkit will at some point adopt Opera’s method, until then it’s limited to fixed width vector images in fixed width containers. Gecko, in the mean time, continues to have open bug reports for CSS in image as well as CSS, and anything from IE will have to wait until IE9 or a sudden switch to Webkit.