Fyrdility

by Alexis Deveria

Posts Tagged ‘multiple browser support’

CSS/SVG Rounded corners for multiple browsers

Monday, September 10th, 2007

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.
(more…)

Powered by Coffee, Marmite, jQuery and WordPress