如何不用border-radius 写圆角边框

html代码：
<divclass="items">
　　<--上面的圆角边框-->
<bclass="xtop"><bclass="xb1"></b><bclass="xb2"></b><bclass="xb3"></b><bclass="xb4"></b></b>
　<ulclass="xboxcon">
　<divclass="item_title">系统管理员选项</div>
<li><ahref="main_dorm.aspx">宿舍管理</a></li>
<li><ahref="main_system.aspx">系统配置</a></li>
<li><ahref="main_quanxian.aspx">权限设置</a></li>
<li><ahref="addnews.aspx">发布新闻</a><ahref="newslist.aspx">[列表]</a></li>
<li><ahref="m_log.aspx">系统日志</a></li>
</ul>

　<--下面的圆角边框-->

　　<bclass="xbottom"><bclass="xb4"></b><bclass="xb3"></b><bclass="xb2"></b><bclass="xb1"></b></b>

<divclass="clear"></div>
</div>

css样式

.xtop,.xbottom{display:block;background:transparent;font-size:1px;}
.xb1,.xb2,.xb3,.xb4{display:block;overflow:hidden;}
.xb1,.xb2,.xb3{height:1px;}
.xb2,.xb3,.xb4{border-left:1pxsolid#77cce7;border-right:1pxsolid#77cce7;}
.xb1{margin:05px;background:#77cce7;}
.xb2{margin:03px;border-width:02px;}
.xb3{margin:02px;}
.xb4{height:2px;margin:01px;}
.xboxcon{margin:0px;display:block;border:0solid#77cce7;border-width:01px;}

解说：

首先，他的圆角实现并不是真的圆角，而是由4个b标签堆积起来的，每个b标签都是高度为1px，最后一个是2px。

　所有的b标签都是块级元素block；

<bclass="xtop"><!--最外面的b标签，包住了4个子b标签。-->
<bclass="xb1"></b><!--这个是最上面一个横线，背景颜色是#77cce7，左右都有5px的外边距，相当于5px的空白-->
<bclass="xb2"></b><!--这个是第二层的，背景是白色，左右边框颜色#77cce7的2px，左右外边距是3px空白。-->
<bclass="xb3"></b><!--第三层，背景白色，左右边框颜色#77cce7的1px，左右外边距是2px-->
<bclass="xb4"></b><!--第四层，背景白色，左右边框#77cce7的1px，外边距1px-->
</b>

下面的左右弧度就是上面的反过来叠加。
实际上就是层层积累的结果，每个b只显示几个像素的点，叠加起来，视觉上就是一个弧度。

就是用4条线，第一条最短实体线，第二条到第四条都是高度为1，两边边框为1的线，这三条线长度依次增长。最后就是形成上面的圆角，而下面的圆角采用反堆积这四条线。