Support Rounded corners in Opera via SVG

[DD32]

Opera has support for rounded corners on elements via SVG backgrounds: ​http://my.opera.com/lugansk/blog/2008/07/20/rounded-corners-in-svg-making-not-all-corners-round

It'd be nice to support them in Opera too. Here's a generic svg.php file which i just knocked up:

<?php
/* SVG Rounded corners for Opera.
 * Note: The radius needs to be twice that of -*-border-radius due to rendering differences.
 **/

header('Content-Type: image/svg+xml');
$radius = isset($_GET['radius']) ? $_GET['radius'] : '5';
$radius = 2 * (int)$radius;
$radiusunit = isset($_GET['unit']) ? $_GET['unit'] : 'px';
$back = isset($_GET['back']) ? $_GET['back'] : 'FFF';
$fill = isset($_GET['fill']) ? $_GET['fill'] : 'E4F2FD';
$stroke = isset($_GET['stroke']) ? $_GET['stroke'] : $fill;
echo '<','?xml version="1.0"?','>';
?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#<?php echo $back ?>" />
<rect x="0" y="0" width="100%" height="100%" rx="<?php echo $radius ?>" ry="<?php echo $radius ?>" fill="#<?php echo $fill ?>" stroke="#<?php echo $stroke ?>" stroke-width="1" />
</svg>

Can be used as such like this:

#login form .submit input {
background: url(../images/svg.php?radius=5);
}

I just started to implement it, But am running into some hurdles (Like a border style being applied to input elements that i cant work out where its coming from) and the need to either set these in their own stylesheet (As you need to specifically state the colours) or in the colours stylesheets which ends up a bit messy.

Thoughts? Is it worth implementing?

[Otto42]

Is Opera planning on supporting border-radius from CSS3 any time soon? If so, this seems like a lot of throwaway effort.

I know IE8 isn't going to support it, and FF3 still only supports it with -moz- which is quite annoying. To make things even worse, Safari supports it with -webkit-. and the implementation of their params is different! Argh!

However, Mozilla is currently actively implementing the actual spec correctly: ​https://bugzilla.mozilla.org/show_bug.cgi?id=431176 and hopefully that will make it into FF 3.1 (but 3.2 is a better bet) so I assume that the other vendors will eventually fall in line here. Might be best to simply use the border-radius property as it's intended to be and wait for the browsers to catch up.

[DD32]

Hm, You raise a good point, I might see if i can get in touch with someone from Opera and see if they've got any input on when/if they might implement it.

[jacobsantos]

Could be a plugin.

[DD32]

I'm going to close as wontfix. It really requires a fair bit too much work for such little advantage IMO, Hopefully Opera will support the CSS3 border-radius property again soon, or whenever it ends up in spec (They supported -o-border-radius at one stage).