CSS圆角实现

[b]1.方法一：上下两张带圆角的图片。宽度固定，允许高度变动.[/b]

<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}

图片：
[img]http://dl.iteye.com/upload/attachment/296248/c0b466e8-605d-36b5-9746-e5b53efeebdd.bmp[/img]

[b]2.方法二：三张图片，上下两张图片再加中间的填充图片.宽度固定，允许高度变动.[/b]

<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>

.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}

[b]3.方法三：四张图片,允许宽度和高度变动。[/b]

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

图示：
[img]http://dl.iteye.com/upload/attachment/296254/d6c6c8f2-dba6-36de-8af2-1b990c16fe7f.bmp[/img]


[b]4.方法四：采用CSS3样式,FF3,CHROME浏览器支持[/b]

-webkit-border-radius: 6px;
-moz-border-radius: 6px;

[b]5.方法五：采用border填充构造[/b]

<div class="radius_top">
<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
</div>
<div class="item_content">内容区</div>
<div class="radius_bottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
</div>

 .r1,.r2,.r3,.r4{overflow:hidden;height:1px;background-color:#fff;zoom:1;}
 .r1{margin:0 5px;background-color:#c9c9c9;}
 .r2{margin:0 3px;border-left:2px solid #c9c9c9;border-right:2px solid #c9c9c9;}
 .r3{margin:0 2px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;}
 .r4{height:2px;margin:0 1px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;}
 .item_content{border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;background-color:#fff;zoom:1;}

部分整理自《精通CSS:高级Web标准解决方案》