What's the story on rounded borders?

[byepolar]

Are they good from a design standpoint? What about compatibility? I like them, is there a reason they aren't used more often? Here is an example:
http://usableweb.com/

[deejay]

Hi Byepolar

As in the example you gave, rounded borders are usually done with a simple table layout and small graphics files for the rounded corners.

Given that it's just a simple table, there's no compatability issues with any of the common browsers.

As for design, I guess that comes down to an issue of taste and whether they suit the style you're aiming for.

Personally I haven't used them on any of my sites except one where they particularly suited the style. In fact I've just taken them off a template for a new site today.. they didn't add to the design, and cutting out that little bit of extra table code and getting rid of those little gifs adds up to a little more saving in speed and bandwidth over a 2,000 page site.

[BjarneDM]

The way to do it at *present* is to make four *.img's - one for each corner

1) the way it's *mostly* done at present is by using a 3x3 table with the four corner cells being *.img's
2) by using css absolute positioning, you can make a div like this:
<div style="position: relative">
<img style="position: absolute; top: aapx; left: bbpx" alt="TopLeftCorner">
etc ...
</div>
(some details ommitted, but you get the idea, I hope)

3) Mozilla has a rather un-documented css-extension that rather close to a proposed w3c css3 : [lists.w3.org...]

For the future we have:
4) [w3.org...]

[davis]

Using tables... you basically make a 3x3 table. In each corner, put a rounded corner image, and then just fill the other cells with the same color as the images.

If you need to split the table in the middle, use nested tables :)

Its quick and simple, and its very easy in wysiwyg...

[cwebb]

I could do it without CSS or images, just use a 200x200 table and make a lot of 1pixel columns and rows and "emulate" the image ;)

[Nick_W]

And, if you want to see what the border-radius property in CSS3 should/may eventually look like try using Moz and using their proprietory version of this:

div#test {
-moz-border-radius: 25%;
}

Very neat, shame it's so utterly unsupported (w3 version).

Nick

[Rhadamanthus]

cwebb - creative solution, but I think it'd end up being even more bandwidth intensive than the images. :)