看见网上有很多人在讨论用css制作圆角的问题，于是自己也下手试试了，不过要提醒大家的是这种方法最好只用来学习和研究，在xhtml中添加无语意的div元素是不符合web标准的。
核心理论：深入理解盒子模型，灵活结合运用元素的border和margin属性.
制作思路：结合下图观察xhtml代码，核心在于放置line0~line3的位置.

xhtml代码：

<div id=”menu”>
<div class=”line0″></div>
<div class=”line1″></div>
<div class=”line2″></div>
<div class=”line3″></div>
<p id=”word”>home</p>
</div>

css代码：

* {
margin:0;
padding:0;
}
body {
font-family:sans-serif, Verdana, Geneva;
font-size:10px;
}
#menu {
width:100px;
margin:0 auto;
}
#menu div { /*圆角盒子的共有属性*/
height:1px;
background:#0f0;
overflow:hidden; /*解决在IE6中不兼容的情况*/
border-left:1px solid #000;
border-right:1px solid #000;
}
#menu .line0 {
margin: 0px 5px;
background:#000;
}
#menu .line1 {
margin: 0px 3px;
border-left:2px solid #000;
border-right:2px solid #000;
}
#menu .line2 {
margin: 0px 2px;
}
#menu .line3 {
margin: 0px 1px;
height:2px;
}
#word {
border:1px solid #000;
border-top:none;
text-align:center;
background:#0f0;
}

查看效果