CSS Round cornered box

Some times it would be necessary to display a group or controls or data in a round cornered box with a heading in it, to accomplish it we generally use images, but using images is not that developer friendly because they must be designed by a graphic designer, heavy on browser, need to updated when ever we use multiple themes, etc.

Add the below in your style sheet or in the head section of the page:

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

Use the below html:

 

     
Here is your Header!
 
 

     
Look ma, no images!
 

Source: http://blog.benogle.com/2009/04/29/css-round-corners/