CSS3中新增了一種非常方便的樣式屬性——border-radius，可以輕松地為元素的邊框添加圓角效果。使用這個屬性可以讓網站設計更加美觀、流暢。

border-radius: 10px;

上述代碼將一個元素的四個角都設置為10px的圓角。如果想設置特定的角，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius這四個屬性分別設置。

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 5px;

上述代碼將一個元素的左上角設置為10px的圓角，右上角設置為20px的圓角，右下角設置為15px的圓角，左下角設置為5px的圓角。

border-radius: 50%;

如果將圓角的值設置為百分數，例如50%，那么元素的所有角都將變成一個半徑為元素寬度（height）的半圓。

需要注意的是，如果設置了一個元素的border-radius后，為它添加陰影效果時需要使用box-shadow，否則邊角處陰影效果會產生“楔形”，使視覺效果不太好看。

box-shadow: 1px 1px 3px #999;

要讓元素在不同的狀態下呈現不同的圓角效果，可以使用CSS偽類：

button { 
border-radius: 5px; 
}
button:hover { 
border-radius: 20px; 
}

上述代碼將一個按鈕元素的默認圓角設置為5px，當鼠標懸停在按鈕上時，圓角變為20px。