]> Rounded Corners – The Last Word | CodeDread Blog

The IEBlog posted an item today telling web developers that rounded corners would not be implemented in the upcoming Internet Explorer 7 and then linked to a 3-month-old article that would teach us all how to do rounded corners in IE 5/6 today. Um, what? Did I miss something? Is it still 2002?

The article then postulates that “Perhaps you’re tired of waiting for the W3C to release the CSS3 Recommendations, which will include specifications for rounded corners…”. Pretty snarky of Microsoft considering IE6′s support of standards like CSS and XHTML.

It then goes on to say: “The goal here is to give you a simple start towards building the next generation look-and-feel of the Web by using today’s available standards”. The problems with this statement are two-fold: 1) The techniques they describe are at least a couple years old (one even older…a table-based solution) so how can they call this “next generation look-and-feel”? and 2) They neglect to mention perhaps the simplest solution of all which involves an already available standard: Scalable Vector Graphics which truly is “next-generation” and has the potential to give the web a facelift.

So the real problem is actually Internet Explorer’s support of existing standards, if I may be so bold.

This guy turned me on to this idea when I was first learning and reading about SVG. The simple idea is that you can use a SVG anywhere on a web page that you can use an image (as mentioned here in the SVG 1.1 spec). This includes the <img> tag and (drum-roll please) CSS background-image.

So in the ideal SVG world, I could have:

corner.svg:

<?xml version=”1.0″ ?>
<svg xmlns=”http://www.w3.org/2000/svg”
  width=”100%” height=”100%” viewBox=”0 0 100 100″ version=”1.1″>
  <rect fill=”white” stroke=”none” x=”0″ y=”0″
    width=”100″ height=”100″ rx=”10″ ry=”10″/>
</svg>

and then in my web page:

<html><head>
<style type=”text/css”>
body { background-color: black; }
.div_roundedcorners {
  background-image: url(“corner.svg”);
  color: blue;
}
</style></head>
<body>
  <div class=”div_roundedcorners”>
  This is a div that will have rounded corners thanks to the
  SVG image used as a background (of course it scales to the
  size of the div too).
  </div>
</body>
</html>

This would produce a black web page with a white rounded rectangle in which the blue HTML text appears.

Unfortunately, both the Opera and the Firefox 1.1 versions of SVG native rendering do not support this potentially very useful feature. There are two Mozilla bugs open to address this (here and here) and I’ve harassed the guys over in the Opera forums a couple times now (here and here). Anybody who reads this blog entry and has an interest in seeing SVG succeed should do their part to vote for these fixes. If we can get two or more major browsers behind this, that would be a tremendous boon.

See, the thing that I’m worried about is that the SVG spec is so huge that developers will focus on the “flash-killer” aspects of SVG or the ultra-cool integration that SVG can have with XHTML. As a consequence, browser developers are neglecting some of the more practical and simple solutions that SVG can provide today (like scaled/animated backgrounds on a plain old HTML web page). This is where the in-roads into web development must first be made if SVG is to become a major player in the web development scene. You can’t remake the web overnight. People are going to be writing HTML (not XHTML) for a long time to come thanks to Internet Explorer. That’s why my first SVG tutorial starts out with an example of some very basic SVG that only scrapes the surface of what this technology can accomplish. Focus on practical and simple uses and incrementally build on that once it is established.

Anyway, some flashy (albeit not very useful) ideas for SVG backgrounds on HTML web pages:

  • Forget rounded corners, what about stylish borders (think SVG paths for swirls, arcs, points, etc)
  • Animated borders like marquee lights
  • Animated backgrounds in which the clouds gently drift behind the HTML ever so slowly, occasionally a bird flaps by…

Ok, I’ll be the first to admit that I’m not very creative when it comes to applying this new technology (all I’ve managed to do was some simply animated navigation menu buttons on my site) but if you put this in front of enough kids who like to tinker, we’ll start to see a whole new web style emerge.

§110 · June 23, 2005 · Software, SVG, Technology, Web, XML · · [Print]

3 Comments to “Rounded Corners – The Last Word”

  1. Holger Will says:

    Hi Jeff
    Thanks for this informative article. i agree that to have this feature in Firefox and Opera would be killer!
    keep up your great work.
    cheers
    Holger

  2. When I first read about SVG, this was my exact first thought. Many sites have simple gradients and rounded corners and such to make their design just a little more appealing. Nowdays, we have to go through lots of trouble making images, then the user has to download them all. I thought SVG would change all that, then I started playing around and realized its restrictions. I hope this will one day be possible.