cross browser strechable round corner with semantic code and minimal use of images. is it possible ?

Question

I know to make round corner is not possible for IE without Javascript or images. JS solution will not work if js is disabled so i want to go for image option

i need any images + css solution to make cross browser compatible round corner div with minimal ,easy to make and pure semantic and W3C valid code, strechable and minimal use of images and photoshop effort.

I know about FF and safari can do with pure css but i need cross browser solution without javascript. I want to make with minimal use of XHTML code and images.

Answer 1

I would just do something like this

<div id="box">
<p>content</p>
<span class="top-left"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-right"></span>
</div>

And position the spans in the corners with absolute positioning. It's got a bit of pollution with the spans, but it will work cross browser. You may be able to get rid of one too, and just made the #box background one of the corner images.

Please make use of sprites too. Draw a circle, and use negative background positions to position a quadrant into each span.

If you wanted to be as semantic (and a little different) as possible, you could wrap all those spans in an IE conditional comment, apply border-radius to the box, and then apply the styles for the spans for our friend IE. This however would seem to me like a bit of overkill.

Answer 2

This site has a lot of "snazzy borders" and "krazy korners", Stu rocks!

Also you weren't specific in your question about boxes or buttons, so you can check out these links for some CSS methods:

An SO answer and some links: Sexy buttons and unbreakable buttons

Answer 3

I wrote about this a few years ago: semantic HTML, one image, minimal CSS, works in most browsers. Combines several techniques.

http://www.the-haystack.com/2006/03/16/rounded-corners/

Still, I would go for (-[prefix]-)border-radius in browsers that support it, and leave the other browsers as they are.