/~ato/weblog

Skip to navigation.

border-radius workaround for Opera

Andreas Tolf Tolfsen

Opera 10 is one of the few web browsers not supporting the experimental CSS3 border-radius property, allowing web authors to make rounded corners on block elements. I here propose a work-around for this issue.

Having worked at Opera Software this Summer, I've had a chance to make myself more familiar with web standards, and in particular web browser technology. Although my work at Opera does not involve web development, one of the many side-effects of my work enables me to dabble around with various (insane) web implementations.

I had been looking forward to letting go of background images for rounded corners for quite some time, but when I heard Opera was taking this feature out of the upcoming Opera 10 release, I figured I should come up with a more elegant solution not requiring me to redo the corners each time I needed a slightly different version.

In WebKit (Safari, Chrome) and Gecko (Firefox), you would typically do the following to give a block element rounded corners: 

.box {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: rgb(240,240,240);
}

It also supports added rounded corners to specified corners of the block: 

.box {
  -webkit-border-radius-topleft: 4px;
  -webkit-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  background-color: rgb(240,240,240);
}

All CSS properties starting with a dash (-) are temporary experimental properties which are not officially a part of the CSS implementation yet. The different browsers uses a prefix to access their own implementations of the upcoming CSS features. WebKit uses -webkit, Gecko -moz (for Mozilla) and Opera -o.

What I came up with was a PHP script that, by the help of SVG, can draw corners. Although many browsers do not support SVG images Opera is, luckily for us, one of the few which does. The other browsers that doesn't support SVG is of no worry to us in this case, as the work-around is only targetted at working in Opera.

We start off with a PHP script that generates an SVG file. It's important that we tell the web server to present it as image/svg+xml so that the web browser will recognize it as an SVG. 

<?

  header("Content-Type: image/svg+xml;charset=utf-8");

  $radius = $_GET["r"];
  if (!$radius) $radius = "5";

  $color = $_GET["color"];
  if (!$color) $color = "silver";
  if (is_numeric(substr($color, 0, 1))) {
    $color = "rgb(" . $color . ")";
  }

?>
<?= '<?xml version="1.0" ?>' ?>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect fill="white" x="0" y="0" width="100%" height="100%" />
  <rect fill="<?= $color ?>" x="0" y="0" width="100%" height="100%" rx="<?= $radius ?>px" />
</svg>

This file could be saved to your images directory. Some people might also prefer to use mod_rewrite to get a different or more aesthetical URI. It would of course also be possible to rewrite this script to use ImageMagick instead, so that it would work in web browsers without SVG support.1

We then call the above PHP script in CSS. The following CSS code could be included in a CSS file accessible to all web browsers or in a file only presented to Opera. It doesn't make any difference: Either the web browser in question doesn't support SVG and ignores the file, or the web browser will use the file, giving the same result as you would get with border-radius. 

.box {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: rgb(240,240,240);
  background-image: url("../images/border-radius.php?r=4&color=240,240,240");
}

Voilá! However, as you can see, this script has a number of shortcomings:

All of the above could be easily fixed, so I invite you to do so. The above work-around is just a quick hack to solve some of my own issues.

I hope this was useful. (-:

Footnotes

  1. An implementation with ImageMagick would infact also solve the border radius problem for Microsoft's Internet Explorer, and would probably be well worth looking in to.

Last updated:

Comments