边框圆角化方式（原文链接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
{   
    200px;
    height:200px;
    border-radius:15px;
    background-color:#093
}

</style>
</head>

<body>
<div id="parent">
    <div id="sub1"></div>
</div>

</body>