CSS圆角实例

* {
    margin:0;
    padding:0;
}
body {
    font-family:sans-serif, Verdana, Geneva;
    font-size:10px;
}
#box {
    width:253px;
    margin:10px auto;
}
#box .line0,.line1,.line2,.line3 {    /*圆角盒子的共有属性*/
    height:1px;
    background:#ebf5ff;
    overflow:hidden;                /*解决在IE6中不兼容的情况*/
    border-left:1px solid #cfe3f8;
    border-right:1px solid #cfe3f8;
}
#box .bg_none{
    background:none;
}

#box .line0 {
    margin: 0px 5px;
    background:#cfe3f8;
}
#box .line1 {
    margin: 0px 3px;
    border-left:2px solid #cfe3f8;
    border-right:2px solid #cfe3f8;
}
#box .line2 {
    margin: 0px 2px;
}
#box .line3 {
    margin: 0px 1px;
    height:2px;
}
#word {
    border:1px solid #cfe3f8;
    border-top:none;
    height:25px;
    text-align:center;
    background:#ebf5ff;
}
#box .content{
    border-left:1px solid #cfe3f8;
    border-right:1px solid #cfe3f8;
}

<div id="box">
  <div class="line0"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  
    <div id="word">在线贷款申请</div>
    <div class="content">

        kkkk</br>
        kkkk</br>
        kkkk</br>
        kkkk</br>

    </div>

  <div class="line3 bg_none"></div>
  <div class="line2 bg_none"></div>
  <div class="line1 bg_none"></div>
  <div class="line0"></div>
</div>