在我们日常的开发中，经常会碰到需要将div的border设置为圆角效果，已达到美化，提高用户体验的目的。
从历史的角度来说，圆角效果的实现一般都是很棘手的问题。一般都是通过图片以及JavaScript方式来实现。在CSS3之前，CSS不支持直接设置圆角的属性。于是在新一代的CSS中增加了圆角效果设置属性，即
但是遗憾的是主流浏览器对其的支持层次不齐，早前版本浏览器不支持此属性，这也就造成在日常的开发中，为了保证兼容性，此属性的应用还没有被普及，常常要做一些舍近求远的做法。
一个兼容性好的解决方案，才是我们真正需要的，所以下面介绍两种：
1、基于传统的Javascript方式控制圆角效果的兼容性很好的解决方案：
这种方式实现的解决方案有很多，这里就用其中很优秀的 curvycorners来说明。为什么要使用curvycorners.js呢？因为其屏蔽了各种浏览器的差异，在内容解决兼容性问题，使得我们使用时变得很方便。下面就是其使用例子：
>
>
3: <head>
4: <title>curvyCorners Demo 1</title>
></script>
6: <style>
7:
8: #myBox {
9: margin: 0.5in auto;
10: color: #fff;
11: width: 60%;
12: padding: 20px;
13: text-align: left;
14: background-color: #f00;
15: border: 3px solid #fff;
16: }
17:
18: html,body {
19: height: 100%;
20: text-align: center;
21: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
22: font-size: 12px;
23: margin: 0px;
24: background-image: url(pattern.gif);
25: color:#FA0;
26: }
27:
28: </style>
>
30:
'load', initCorners);
32:
33: function initCorners() {
34: var settings = {
35: tl: { radius: 20 },
36: tr: { radius: 20 },
37: bl: { radius: 20 },
38: br: { radius: 20 },
true
40: }
);
42: }
43:
44: </script>
45: </head>
46:
47: <body>
48: <h1>curvyCorners Demo 1</h1>
49:
>
51: It's my box. If you saw the radius effect, you got it!
52: </div>
53:
54: </body>
55: </html>