上下两张图片CSS圆角
与无图 CSS 圆角相比，上下两张图片 CSS 圆角就比较容易制作了，即用切图软件把圆角的上半部分、下半部分分别切出来，然后放到网页中。效果图如下：
圆角上半部分和下半部分图片：
上下两张图片和中间元素的左右边框就组成了完整的圆角。
例子代码
XHTML代码：
<div id="box">
<div id="top"></div>
<div id="content"><h1>有图CSS圆角</h1></div>
<div id="bottom"></div>
</div>
<div id="top"></div>
<div id="content"><h1>有图CSS圆角</h1></div>
<div id="bottom"></div>
</div>
XHTML代码不一定要这样写，您可以根据您的实际情况写出更有语义的XHTML代码，这里这样写是为了更好的理解这种制作方法。
CSS代码：
*{
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}
#top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。