Now, Firefox supports border-radius with the -moz- prefix, and Safari and Chrome support it with the -webkit- prefix. What about Opera? No support yet, though it is expected to be fully supported once Vega is released. Thankfully, Opera 9.5 and above do support SVG as CSS backgrounds. This provides a method to emulate border-radius by using an SVG file with a rounded-corner rectangle. Easy enough for equal-sized corners, but it gets trickier if you want something more complicated than that.
To take away the hard work in writing SVG files with different-sized corners, I’ve created a rounded corner generator. With it, you generate both the code for Firefox and Safari, as well as the Data URI for the Opera SVG file. For those unfamiliar with Data URIs, this is a string that includes the data of the file, removing the need to use an external file. If you want the same background for multiple elements, you’d be better off just using the external file.
In order to use this method without some method of sending separate CSS rules to Opera, keep in mind the following minor limitations:
– You can’t set a border to the element
– The SVG file needs to know the color behind your element to hide the actual background color
If these issues are a problem for your current design, you may want to look into a method to serve the CSS for Opera separately. This is possible using CSS hacks (not recommended) or by using server-side “dynamic” CSS.
So there you go. We’ll be stuck using hacks for IE for quite some time, but that’s no reason not to use a CSS-only solution for the rest of the bunch today.
One reply on “border-radius for all!”
[…] an easy way to generate rounded corner SVG files, see my border-radius for all! post. One of the geekier things that excite me (okay, I guess there’s a lot of those) are […]