两种方法实现圆角边框

第一种
<style>
div.bg{background:#ffc20e;width:50%}
b{display:block;}
/*将所有B标签转成块级元素*/

div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/

div b.topb,div b.bottomb{ background-color:white}
/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/

b.t1{margin:0 5px}
/*标签margin值将决定溢出的多少值被隐藏*/
b.t2{margin:0 3px}
b.t3{margin:0 2px}
b.t4{margin:0 1px;height:2px;}

</style>

<div align="center">
<div class="bg">

<b class="topb"><!--**此b标签所包含的b标签要进行溢出隐藏**-->
<b class="t1"></b>
<b class="t2"></b>
<b class="t3"></b>
<b class="t4"></b>

</b>
<br />
这个代码是网页教学网从互联网收集整理所得, 谢谢支持!
<br />
<br />

<b class="bottomb">
<b class="t4"></b>
<b class="t3"></b>
<b class="t2"></b>
<b class="t1"></b>
</b>

</div>
</div>

第二种

<style type="text/css">
.l1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#cce3ee; margin:0 5px;}
.l2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #cce3ee; border-left:2px solid #cce3ee; margin:0 3px;}
.l3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #cce3ee; border-left:1px solid #cce3ee; margin:0 2px;}
.l4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #cce3ee; border-left:1px solid #cce3ee; margin:0 1px;}
.lcon{border-right:1px solid #cce3ee; border-left:1px solid #cce3ee;background:#fff;display:block;margin:0;color:#fff;}
</style>

<div style="width:950px;"><span class="l1"></span><span class="l2"></span><span class="l3"></span><span class="l4"></span>
<span class="lcon">这里是包含在圆角框里的内容</span>
<span class="l4"></span><span class="l3"></span><span class="l2"></span><span class="l1"></span> </div>