CSS3圆角属性在Firefox,Chrome,Safari的实现

-moz-border-radius: {1,4} | inherit

如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px;

也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft来设置。

也可以用合并起来一起设置，如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。

-webkit-border-radius：{1,2} | inherit;

如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px;

如果是单独设置四个角的话，需要采取这种方式

-webkit-border-top-left-radius:5px 10px;

-webkit-border-top-right-radius:5px 10px;

-webkit-border-bottom-right-radius:5px 10px;

-webkit-border-bottom-left-radius:5px 10px;

如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

著名皮肤制作人utom总结了圆角属性不同浏览器下的运用

-moz-border-radius: 5px;          //支持Gecko、FireFox

-khtml-border-radius: 5px;     //支持Konqueror

-webkit-border-radius: 5px;    //支持 Chrome、Safari

border-radius: 5px;                     //支持IE内核浏览器