Fyrdility

by Alexis Deveria

CSS/SVG Rounded corners for multiple browsers

Here’s a demo of a div with a simple 10px radius 1px border that works in Opera 9.5, Firefox 2+ and Safari 3 beta. It uses -moz-border-radius for Firefox, -webkit-border-radius for Safari and an SVG background for Opera 9.5. The SVG file this time is actually a modified version of a new method Holger Will came up with.

Of course, it doesn’t work quite that easily. The CSS3 corner method uses a border, but for Opera we don’t want that border to appear because it already exists in the SVG file. Additionally, we’ll have to change the position and padding slightly so the border appears in the exact same place.

One way to solve the problem would be javascript browser-sniffing, but that’s an “evil” solution, and I’d like to avoid using javascript if at all possible. Instead, I used O9.5′s :nth-child() pseudo-selector with a value of 1n to target every instance. Other browsers (except Konqueror) don’t support this (yet), so until they do, this method should work.

So obviously this is just a temporary solution until either Opera supports rounded corners, other browsers support SVG backgrounds, or other browsers support the selectors that Opera does (which would break my “hack”).

Oh, and to allow support in IE, I’d recommend a javascript trick (there are several out there) inside a conditional comment tag. It may also be possible to use VML to achieve a similar effect as the SVG background, but I’m not sure.

Tags: , ,

2 Responses to “CSS/SVG Rounded corners for multiple browsers”

  1. FataL Says:

    So obviously this is just a temporary solution until either Opera supports rounded corners, other browsers support SVG backgrounds, or other browsers support the selectors that Opera does (which would break my “hack”).
    That’s the first reason I would avoid to use this solution.
    The second reason is lack of IE support.

    Maybe there is some more universal and bullet proof method that use additional markup?..

  2. Alexis Deveria Says:

    I take it you’re thinking of a javascript solution that would test a browsers capabilities, and based on that go with the best method?

    That’d be cool, but I’m not sure if there’s a way to test in javascript whether or not a browser supports SVG backgrounds.

    This is a bit old, but here’s a whole list of other methods…

Powered by Coffee, Marmite, jQuery and WordPress