By greimer on Feb 27, 2008
test page I built. This wasn't an exhaustive test for CSS3 border-radius compliance, just an attempt to see where the browsers were with basic support. Only one background image is used (shown below), the rest is pure CSS. (All tests done on the Mac.)The black and white object you're looking at will look different depending which browser you're using, but it should look like a circular target of some sort. It was created using nothing more than CSS's border-radius property and a couple of span tags. All of that to say this: It looks like Safari/Webkit browsers are rendering border-radius quite nicely these days, and Gecko-based browsers aren't far behind, if Firefox's latest public beta means anything. To illustrate this, I've posted some screenshots of a
(this is the background image)
Camino 1.5.1 (shown below): This pretty much sums up the entire Mozilla family as of Feb 27th, 2008 in terms of border-radius support. Note the lack of anti-aliasing and the irregular edges. Also note how the background image ignores the boundaries of the rounded corners. Still, it's a commendable effort considering CSS3 isn't actually finalized.
Firefox 3 beta 3 (shown below): What an improvement. The radius forms a nearly perfect, anti-aliased circle (radius=15, width=30) and the background image respects the boundaries now.
Safari 3.0.4 (shown below): Can "perfecter" be used as an adjective? Safari, as usual, is an overachiever, already having released a final version to the public that has decent support for border-radius. In fact, Firefox 3's implementation looks nearly identical to this. (I hope Firefox 3's support isn't just a Mac thing.)
Opera 9.26 (shown below): For reference, this is what it looks like if the browser doesn't support border-radius at all.
For reference, here's the test page.