Web Wisdom

The CSS:

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}

.b1h {height:1px; background:#939393; margin:0 5px;}

.b2h, .b2bh {height:1px; background:#7FB539; border-right:2px solid #939393; border-left:2px solid #939393; margin:0 3px;}

.b3h, .b3bh {height:1px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 2px;}

.b4h, .b4bh {height:2px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 1px;}

.b2bh, .b3bh, .b4bh {background: #FFFFFF;}

.headh {background: #7FB539; border-right:1px solid #939393; border-left:1px solid #939393;}

.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}

.contenth {background: #FFFFFF; border-right:1px solid #939393; border-left:1px solid #939393; border-top:1px solid #939393;}

.contenth div {margin-left: 12px; padding-top: 5px;}

The HTML:

<b class=”b1h”></b><b class=”b2h”></b><b class=”b3h”></b><b class=”b4h”></b>

<div class=”headh”>

<h3>Header Goes Here</h3>

</div>

<div class=”contenth”>

<div>Content Goes Here</div>

</div>

<b class=”b4bh”></b><b class=”b3bh”></b><b class=”b2bh”></b><b class=”b1h”></b>

The source:

http://blog.yosle.com/2007/09/20/css-round-corners/

This entry was posted on Wednesday, August 13th, 2008 at 7:21 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.