The most semantic way of making this container

Question

I want to make the following shape using divs and border radius, with fall back to square corners for old browsers. No images please.

I am having a bit of trouble ma

Answer 1

I also found a method of using an image which will not appear if the browser does not support rounded corners. It is much more semantic, and the whole point of using border-radius is to negate unnecessary markup. I think I will actually use this method, but I won't accept it as an answer as I stated that I do not want images. But here it is: http://jsfiddle.net/a93Rb/13/

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 2

My idea was white rounded div with dark background under bottom left corner. (I can't get it to work myself, so it would be great to see result :) )

Answer 3

I'm coming late to the party, but I love a challenge and here is my solution:

http://jsfiddle.net/mtTLu/

Features:

1. No extra markup
2. Falls back to straight corners
3. No images
4. Webkit and Firefox ready.

However, it's terrible css code. If I ever encountered someone who made this to avoid one div of unsemantic code, I'd punch him in the face.

But, I think it fits your constraints.