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/

    

    

 

.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;}