網頁制作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 的方式。
