Cross-browser expandable round corner with semantic code and minimal use of images. Is it possible?

Question

I know that a round corner is impossible for IE without Javascript or images. JS solution will not work if js is disabled, so I want to go to image option

I need any images + css solution to make a cross-browser round corner div with a minimal , easy to make and pure semantic and W3C real , extensible and minimal use of images and working with Photoshop.

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

Answer 1

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

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

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

Answer 2

See 25 rounded corner methods using CSS .

ThrashBox - .

_{(: cssjuice.com)}

XHTML:

<div class="sidebox">
    <div class="boxhead"><h2>Test Headline</h2></div>
    <div class="boxbody">
        <p>This is a short sample paragraph.</p>
        <p>And another one.</p>
    </div>
</div>

, - .

_{(: cssjuice.com)}

CSS .

Answer 3

-

<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>

span . span s, . , #box .

. , .

( ), , span IE, -, IE. , , .

Answer 4

There are a lot of evil borders and krazy korners on this site , Stu rock!

Also, you were not specific in your question about boxes or buttons, so you can check these links for some CSS methods:

SO answer and some links: Sexy buttons and indestructible buttons