这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。
先看效果：
制作方法
为了更好的理解，先用简单的代码为例。
XHTML代码：
XML/HTML Code复制内容到剪贴板
<bclass="top"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b></b>CSS代码：
CSS Code复制内容到剪贴板
b{display:block;}.b1,.b2,.b3,.b4{overflow:hidden;height:1px;border-left:1pxsolid#000;border-right:1pxsolid#000;}.b1{margin:05px;background:#000;}.b2{margin:03px;border-width:02px;}.b3{margin:02px;}.b4{height:2px;margin:01px;}这段代码效果如下图：
.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。
为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。
下半部分和上半部分的原理是一样的，只是“倒”过来了。
完整的代码
XTHML代码：
XML/HTML Code复制内容到剪贴板
<divid="box"><!--容器--><bclass="top"><!--上半部分圆角--><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b></b><divid="content">内容区</div><bclass="bottom"><!--下半部分圆角--><bclass="b4"></b><bclass="b3"></b><bclass="b2"></b><bclass="b1"></b></b></div>CSS代码：
CSS Code复制内容到剪贴板
b{display:block;}.b1,.b2,.b3,.b4{overflow:hidden;height:1px;border-left:1pxsolid#000;border-right:1pxsolid#000;}.b1{margin:05px;background:#000;}.b2{margin:03px;border-width:02px;}.b3{margin:02px;}.b4{height:2px;margin:01px;}#content{border:solid#000;border-width:01px;}3D效果CSS圆角
先看效果吧：
下面给出相应的代码。
XHTML代码：
XML/HTML Code复制内容到剪贴板
<divclass="box"><bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b><divclass="content"><h1>3D效果CSS圆角</h1></div><bclass="b4b"></b><bclass="b3b"></b><bclass="b2b"></b><bclass="b1b"></b></div>CSS代码：
CSS Code复制内容到剪贴板
*{margin:0;padding:0;}.box{width:400px;margin:20pxauto;}h1{font-size:2em;color:#fff;padding:20px;text-align:center;}b{display:block;overflow:hidden;height:1px;background:#96C2F1;border-width:01px;border-style:solid;}.b1{margin:05px;background:#fff;border:none;}.b2{border-right:#eee;}.b3{border-right:#ddd;}.b4{border-right:#aaa;}.b4b{border-left:#eee;}.b3b{border-left:#ddd;}.b2b{border-left:#aaa;}.b2,.b3,.b4{border-left-color:#fff;}.b4b,.b3b,.b2b{border-right-color:#999;}.b2,.b2b{margin:03px;border-width:02px;}.b3,.b3b{margin:02px;}.b4,.b4b{height:2px;margin:01px;}.b1b{margin:05px;background:#999;border:none;}.content{background:#96C2F1;border-left:1pxsolid#fff;border-right:1pxsolid#999;} 
