CSS Rounded Corners

[toughstuff.htm]

A common topic, I realize. But is there anyway to style a rounded rectangle in CSS that will be supported by all major browsers (including IE7+)? Preferably no graphics involved, although I would greatly appreciate nearly any simple solution. Thank you.

[james438]

I'm no expert in this area, but I use


<style type="text/css">
.clear
{
font-size: 1px; height: 1px;
}
.bl
{
background: url(http://www.animeviews.com/images/pops/bl3.png) 0 100% no-repeat;
}
.br
{
background: url(http://www.animeviews.com/images/pops/br3.png) 100% 100% no-repeat;
}
.tl
{
background: url(http://www.animeviews.com/images/pops/tl3.png) 0 0 no-repeat;
}
.tr
{
background: url(http://www.animeviews.com/images/pops/tr3.png) 100% 0 no-repeat;padding:1em;
}

</style>

<div style='width:10%;background-color:red;'><div class='bl'><div class='br'><div class='tl'><div class='tr'>vf</div></div></div></div></div><div style='width:10%;background-color:red;'><div class='bl'><div class='br'><div class='tl'><div class='tr'>vf</div></div></div></div></div>

see also http://www.roundedcornr.com/
http://articles.sitepoint.com/article/css-round-corners-boxes-curves

[X96 Web Design]

I don't think round corners need to be cross-browser. I think use the CSS3 round corners syntax, and screw IE. :P

If a visitor is using IE, they won't get some of the frills of the design like rounded corners and drop shadows (if CSS3), but is it really that important? I figure it's their fault for not using a "proper" web browser.

Until IE9, of course. :D