點評：border-radius：用這個屬效能實現圓角邊框的效果。現在只有Mozilla/Firefox 和 Safari 3支援該屬性。

-webkit-border-radius：蘋果；谷歌，等一些瀏覽器認，因為他們都用的是webkit核心； 
-moz-border-radius：moz這個屬性 主要是專門支援Mozilla Firefox 火狐瀏覽器的CSS屬性。 
在這兩個屬性有值的時候，去掉哪個屬性，對用他們做核心的瀏覽器就有影響，如果沒值的話，就沒影響，這兩個屬性和，IE，和360沒關係。不刪除的話影響微乎其微. 

border-radius：用這個屬效能實現圓角邊框的效果。 
現在只有Mozilla/Firefox 和 Safari 3支援該屬性。請看下面的示例程式碼： 

複製程式碼 程式碼如下:
<div style="background-color:#ccc; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border:1px solid #000; 
padding:10px;" 
> 

Mozilla/Firefox 和 Safari 3使用者將在這裡看到圓角邊框 
此外，設計者還可以隨意指定圓角的位置，左上、左下、右上、右下四個方向。在mozilla/firefox和safari中的具體書寫格式如下： 

-moz-border-radius-topleft / -webkit-border-top-left-radius 
-moz-border-radius-topright / -webkit-border-top-right-radius 
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius 
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius 


Mozilla/Firefox 和Safari 3 中看到的左上圓角 
Mozilla/Firefox 和Safari 3 中看到的右上圓角 
Mozilla/Firefox 和Safari 3 中看到的左下圓角 
Mozilla/Firefox 和Safari 3 中看到的右下圓角

CSS3中border-radius隱藏的威力 

這篇文章將簡述使用CSS3的border-radius來畫圓、半圓和四分之一圓，並如何利用它們。 
如何使用border-radius屬性 
下面是border-radius屬性最基本的使用方法。 


複製程式碼 程式碼如下:
.round { 
border-radius: 5px; /* 所有角都使用半徑為5px的圓角，此屬性為CSS3標準屬性 */ 
-moz-border-radius: 5px; /* Mozilla瀏覽器的私有屬性 */ 
-webkit-border-radius: 5px; /* Webkit瀏覽器的私有屬性 */ 
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角 */ 
} 

關於在IE裡怎麼實現圓角，可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章。 

1.用border-radius畫圓 
實心圓 

如圖，是用border-radius屬性畫出來的一個完美的實心圓。畫實心圓的方法是高度和寬度相等，並且把border的寬度設為高度和寬度的一半。程式碼如下。 

複製程式碼 程式碼如下:
#circle { 
width: 200px; 
height: 200px; 
background-color: #a72525; 
-webkit-border-radius: 100px; 
} 

空心圓

通過border-radius屬性畫空心圓和畫實心圓的方法差不多，只是border的寬度只能小於高度和寬度的一半。程式碼如下。 

複製程式碼 程式碼如下:
#circle { 
width: 200px; 
height: 200px; 
background-color: #efefef; /* Can be set to transparent */ 
border: 3px #a72525 solid; 
-webkit-border-radius: 100px; 
} 

虛線圓

複製程式碼 程式碼如下:
#circle { 
width: 200px; 
height: 200px; 
background-color: #efefef; /* Can be set to transparent */ 
border: 3px #a72525 dashed; 
-webkit-border-radius: 100px 100px 100px 100px; 
}