如何在CSS上使用圓角邊框？

Question

有新的CSS標準提供圓形邊框的方法嗎？ 這是不可能的CSS級別2

Answer 1

這是在CSS 3

border-radius: 4em;

http://www.w3.org/TR/css3-background/#the-border-radius

Answer 2

Border-radius: create rounded corners with CSS!

這個盒子應該有一個圓角的Firefox，Safari瀏覽器/ Chrome，Opera和IE9。 這個例子的代碼，理論上很簡單：

#example1 { 
border-radius: 15px; 
} 

然而，就目前而言，你還需要使用-moz-前綴，以支持Firefox（見的這個瀏覽器支持部分文章的進一步細節）：

#example1 { 
-moz-border-radius: 15px; 
border-radius: 15px; 
} 

Answer 3

是的。 CSS3已經擁有它。

許多瀏覽器已經擁有它。

• 在Mozilla中/ Gecko瀏覽你需要-moz-border-radius雖然他們過渡到border-radius。
• 在Safari/Chrome/webkit瀏覽器中，您需要-webkit-border-radius。
• IE9及以上需要border-radius（IE8及以下根本不支持）。
• 未來當CSS3被廣泛採用時，您只需在所有瀏覽器中使用border-radius即可。

如果你擔心Opera的話，現在最好使用全部三種，再加上-o-border-radius。

Answer 4

什麼Thomas Rutter said，再加上這裏是handy resource，因爲WebKit和壁虎使用不同的屬性，如top-left。