边框圆角化方式（原文链接http://www.cnblogs.com/SJP666/p/4678730.html）
第一种方法：如果是CSS2.2的话，可以简单写一个制作圆角矩形，分上中下裁成三张图
1 <title>CSS3实现圆角</title> 2 3 <style type="text/css"> 4 5 #box 6 7 { 8 9 width:200px; 10 11 height:30px; 12 13 background:url("../images/bt_bottom.jpg") no-repeat left bottom; 14 15 } 16 17 #box h1 18 19 { 20 21 width:200px; 22 23 height:20px; 24 25 text-indent:-9999px; 26 27 background:url("../images/bt_top.jpg") no-repeat left top; 28 29 } 30 31 /*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/ 32 33 #box div#content 34 35 { 36 37 width:200px; 38 39 height:200px; 40 41 background:url("../images/bt_bg.jpg") repeat-y; 42 43 } 44 45 </style> 46 47 </head> 48 49 <body> 50 51 <div id="box"> 52 53 <h1>标题</h1> 54 55 <div id="content"></div> 56 57 </div> 58 59 </body> 60 61 </html>
第二种方法：如果是使用CSS实现圆角的话，那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的浏览器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否则的话，只能使用图片来进行实现了，当然也可以使用css2，但是那个太过于麻烦。
下面我给你一个例子，你可以在以上我提到的相应浏览器中进行浏览，那样效果会更好！
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>CSS3实现圆角</title> 6 <style type="text/css"> 7 8 .box 9 10 { 11 width:200px; 12 height:200px; 13 background:#09F; 14 -moz-border-radius:8px;/*8px是圆角的角度，值越大则圆角效果越明显，如果修改此项，请修改以下两项的值，使之相同*/ 15 -webkit-border-radius:8px; 16 border-radius: 8px; 17 } 18 } 19 </style> 20 </head> 21 <body> 22 <div class="box"></div> 23 </body> 24 </html>
请将以上代码复制粘贴后，保存为html文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：
无图！！！！
第3种方法：直接用 border-radius
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#sub1
{
width:200px;
height:200px;
border-radius:15px;
background-color:#093
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1"></div>
</div>
</body>
