我们在网页制作中常常为了页面的美观，而设计一些圆角的边框。常用的方法是事先做好圆角效果的图片，然后把图片进行分割处理。这样做的缺点就是网页中附带了好多图片，影响网页的打开速度，其实我们完全可以用CSS来实现圆角边框的效果，具体方法请接着往下看。

用CSS实现圆角边框效果截图如下所示：

用CSS实现圆角边框效果代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现圆角边框效果的方法-HTMer</title>
<style type="text/css">
<!--
b{display:block;overflow:hidden;height:1px;}
.htmer_circle1{margin:0 2px; background:#333;}
.htmer_circle2,.content{border-color:#333;border-style:solid;border-width:0 1px;clear:both;}
.htmer_circle2{margin:0 1px;}
-->
</style>
</head>
<body>
<b class="htmer_circle1"></b>
<b class="htmer_circle2"></b>
<div class="content">用CSS实现圆角边框效果的方法&mdash;&mdash;<a href="http://www.htmer.com">HTMer.Com</a></div>
<b class="htmer_circle2"></b>
<b class="htmer_circle1"></b>
</body>
</html>