圆角实例

<style type="text/css">  
*{padding:0px;margin:0px;}
body{padding:100px 0px 0px 100px;}
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}   
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}   
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{/*border-left:1px solid #999;border-right:1px solid #999;*/}   
.b1,.b1b{margin:0 5px;/*background:#999;*/ width:292px;}   
.b2,.b2b{margin:0 3px;/*border-width:2px;*/ width:292px;}   
.b3,.b3b{margin:0 2px; width:296px;}   
.b4,.b4b{height:2px;margin:0 1px; width:298px;}   
.d1{background:#9FF;}   
.k {height:290px;width:280px;padding:5px 10px;}   




.b1a,.b2a,.b3a,.b4a,.b1ba,.b2ba,.b3ba,.b4ba,.ba{display:block;overflow:hidden;}   
.b1a,.b2a,.b3a,.b1ba,.b2ba,.b3ba{height:1px;}   
.b2a,.b3a,.b4a,.b2ba,.b3ba,.b4ba,.ba{border-left:1px dashed #999;border-right:1px dashed #999;}   
.b1a,.b1ba{margin:0 5px;/*background:#999;*/ width:272px;} 
.b1a{border-bottom:1px dashed #999;}
.b1ba{border-top:1px dashed #999;}
  
.b2a,.b2ba{margin:0 3px;border-width:2px; width:272px;}   
.b3a,.b3ba{margin:0 2px; width:276px;}   
.b4a,.b4ba{height:2px;margin:0 1px; width:278px;}   
.d1a{background:#9FF;}   
.ka {width:280px;height:280px;}  

</style>  
  
<div style="width:302px;height:310px;">  
  <b class="b1"></b>
  <b class="b2 d1"></b>
  <b class="b3 d1"></b>
  <b class="b4 d1"></b>  
  <div class="b d1 k"> 
    <b class="b1a"></b>
    <b class="b2a d1a"></b>
    <b class="b3a d1a"></b>
    <b class="b4a d1a"></b>  
    <div class="ba d1a ka">  
      <font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>  
    
    </div>  
    <b class="b4ba d1a"></b>
    <b class="b3ba d1a"></b>
    <b class="b2ba d1a"></b>
    <b class="b1ba"></b>  
  </div>
  <b class="b4b d1"></b>
  <b class="b3b d1"></b>
  <b class="b2b d1"></b>
  <b class="b1b"></b>  
 
</div>