网页制作Webjx文章简介：年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。而W3C早在 2002年的CSS3草案 中就加入了一个叫 border-radius 的属性，通过它可以直接来定义HTML元素的圆角。
秦歌(YanKaven) 的站点：
两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team 的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在 中就加入了一个叫 的属性，通过它可以直接来定义HTML元素的圆角。
CSS3的border-radius规范
中其主要信息如下：
属性：
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
值：<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图：
属性：border-radius。它是上面四个属性值的简写。
值：<length>{1,4} [ / <length>{1,4} ]?如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。 浏览器支持
实际中，目前没有任何一款浏览器支持这个属性，只有部分浏览器利用其私有属性支持部分实现：
Firefox对border-radius的支持：
-moz-border-radius: <length>{1,4} | inherit
-moz-border-radius-bottomleft : <length> | inherit
-moz-border-radius-bottomright : <length> | inherit
-moz-border-radius-topleft : <length> | inherit
-moz-border-radius-topright : <length> | inherit：
-webkit-border-radius: <length>{1,2} | inherit
-webkit-border-bottom-left-radius : <length>{1,2} | inherit
-webkit-border-bottom-right-radius : <length>{1,2} | inherit
-webkit-border-top-left-radius : <length>{1,2} | inherit
-webkit-border-top-right-radius : <length>{1,2} | inheritOpera尚不支持border-radius，虽然 Opera10 alpha拥有众多的CSS3改进，但是依旧看不到对其支持的希望。 IE就不用说了，标准的不支持了。从MSDN的 中可以看出IE8已经铁定不支持了。 实际应用
最简单的应用就是支持的用圆角，不支持的用方角。比如Wordpress2.7的后台、雅虎口碑UED 的blog和 今天你带伞了吗? 。基础代码如下：
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
实现请看演示实例。
利用VML可以实现从IE5-7的圆角 ，但是貌似IE8不支持VML了。组件DD_roundies 就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了，我感觉还不如不要。
像VML一样，Canvas也能实现圆角，切除了IE外，所有的主流浏览器都支持。所以就有了两者结合实现的组件 Cornerz 。
如果上面的现实太痛苦，而又非要用圆角的话，要么一个像素一个像素去拼装，比如Chunky Borders；要么就老老实实用图片来实现吧，比如 CSS Mojo 的方式。
