【CSS】圓角屬性 - CSS3 -moz-border-radius, -webkit-border-radius, border-radius

[Firefox]

-moz-border-radius 是 Firefox 用來顯示圓角的語法。
如果四個角都是相同的設定，可以使用這個方法 :

-moz-border-radius:25px; /*四個角一起設定*/

若需要個別設定四個角的話，有兩種方法 :

-moz-border-top-left-radius:15px; /*左上角*/
-moz-border-top-right-radius:15px; /*右上角*/
-moz-border-bottom-right-radius:10px; /*右下角*/
-moz-border-bottom-left-radius:10px; /*左下角*/

或者是所有設定值都寫在同一句語法中 :
( 依序是 : 左上角; 右上角; 右下角; 左下角;)

-moz-border-radius:15px 0 15px 0;

[Google Chrome, Safari]

Chrome和Safari都是用 -webkit-border-radius 來實現圓角的效果。

如果想要四個角都一樣的話這樣就可以達成你要的效果了。

-webkit-border-radius:25px;

如果是單獨設置四個角的話，需要採取這種方式 :

-webkit-border-top-left-radius:15px; /*左上角*/
-webkit-border-top-right-radius:15px; /*右上角*/
-webkit-border-bottom-right-radius:10px; /*右下角*/
-webkit-border-bottom-left-radius:10px; /*左下角*/

或者是所有設定值都寫在同一句語法中 :

-webkit-border-radius:15px 10px;

ps.下面這種是不合法的方式( -webkit-border-radius 不支援這種寫法) :

-webkit-border-radius:10px 10px 15px 15px;

[IE9]
IE9尚未推出，但已經有許多技術方面的文件流出來了。以下是IE支援圓角矩形的CSS語法。

border-top-left-radius:15px; /*左上角*/
border-top-right-radius:15px; /*右上角*/
border-bottom-left-radius:10px; /*左下角*/
border-bottom-right-radius:10px; /*右下角*/

或者是這樣寫 :

border-radius:15px; /*四個角一起設定*/