Rounded Corners CSS

[Nate1]

I Have alot of CSS classes fro variations of the rounded corner for tables.

Where the Child classes define how the cells are rendered, I like the way this code is written doesn't create cross browser problems, haven't taken much time to look at other ways of doing this, a bit slimer would be nice, Though Question is each of these cells uses an Image each independent of the others (top right corner etc), on yahoo mail, they have rounded corners made from a single image with four circles on it.

What are the benefits to doing the rounded corners the way Yahoo does it?

.EEE table{border-spacing:0;}
.EEE .TR{background:URL('../../Images/Corners/EEEEEE/TR.gif') no-repeat;height:9px;width:9px;}
.EEE .T{background:URL('../../Images/Corners/EEEEEE/T.gif') repeat-x;line-height:9px;}
.EEE .TL{background:URL('../../Images/Corners/EEEEEE/TL.gif') no-repeat;height:9px;width:9px;}
.EEE .L{background:URL('../../Images/Corners/EEEEEE/L.gif') repeat-y;min-height:20px;}
.EEE .C{background:#EEEEEE;}
.EEE .R{background:URL('../../Images/Corners/EEEEEE/R.gif') repeat-y;}
.EEE .BR{background:URL('../../Images/Corners/EEEEEE/BR.gif') no-repeat;height:9px;width:9px;}
.EEE .B{background:URL('../../Images/Corners/EEEEEE/B.gif') repeat-x;line-height:9px;}
.EEE .BL{background:URL('../../Images/Corners/EEEEEE/BL.gif') no-repeat;height:9px;width:9px;}
/* Square Croners */
.EEE .TLs{background:URL('../../Images/Corners/EEEEEE/TLsq.gif') no-repeat;height:9px;width:9px;}
.EEE .BLs{background:URL('../../Images/Corners/EEEEEE/BLsq.gif') no-repeat;height:9px;width:9px;}
.EEE .BRs{background:URL('../../Images/Corners/EEEEEE/BRsq.gif') no-repeat;height:9px;width:9px;}
.EEE .TRs{background:URL('../../Images/Corners/EEEEEE/TRsq.gif') no-repeat;height:9px;width:9px;}

<table class="EEE">
<tr><td class="TL"></td><td class="T"><td></td><td class="TR"></td></tr>
<tr><td class="L"></td><td class="C"><td></td><td class="R"></td></tr>
...
</table>

[ray326]

It only has to load one image.

[svidgen]

You might want to try my rounded corner generator: http://svidgen.com/rcg.php. I actually just uploaded it a few hours ago.

It also has the benefit of using a single image for each corner.

[LeeU]

Here is a list (http://snipplr.com/blog/2008/07/27/css-rounded-corner-roundup/) of some other techniques.