border-radius，國內翻譯成圓角，你可能以爲這個屬性就是用來畫圓角，沒錯，但是除此之外，它還可以做點別的事情。radius其實指的是邊框所在圓的半徑，這個CSS3屬性不僅能夠創建圓角，還可以創建橢圓角（如圖下圖第7），把這些角按照不同的順序和大小來展現，能夠繪製成多種多樣的圖形。以下圖例就是通過定義border-radius得到的效果。
語法和解釋
border-radius可以通過值來定義樣式相同的角，也對每個角分別定義。下面的表格解釋了各個寫法所表示的效果。
語法
border-radius:10px
解釋
將創建四個大小一樣的圓角，如圖1和2。
語法
border-radius:10px 15px 10px 5px;
解釋
四個值分別表示左上角、右上角、右下角、右下角。
語法
border-radius:10px 15px;
解釋
第一個值表示左上角、右下角；第二個值表示右上角、左下角。
語法
border-radius:10px 15px 5px;
解釋
第一個值表示左上角；第二個值表示右上角、左下角；第三個值表示右下角。
語法
border-bottom-left-radius:20px 10px;
解釋
創建不對稱的角–橢圓角。
語法
border-radius:20px/10px;
解釋
寫橢圓角的時候，可以用短寫法，創建四個一樣的橢圓角。
語法
border-radius:10px 20px 30px 40px
解釋
四個值分別表示四個角的半徑（水平和垂直半徑一樣），如圖11。
語法
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;
解釋
斜槓前面的一組四個值分別表示四個角的水平半徑；斜槓後面的一組四個值分別表示四個角的垂直半徑。如圖7。
語法
border-radius:10px 20px 40px/20px 50px
解釋
斜槓前面和後面每一組分別表示的是四個角水平半徑和四個角垂直半徑。兩個值、三個值的順序規則你懂的哈。
對於每個角的兩個值，分別代表的是該角的水平方向和垂直方向的半徑。若有四個值，上面表格有解釋。看下面這個圖，或許會清晰些。（如下圖）
邊框大小和外半徑、內半徑的關係
實際的內半徑相當於外半徑減去相應的邊框大小。相減的值中如果至少一個爲爲負值或零，則內半徑爲直角。不管怎樣，相鄰的兩個邊都會形成流暢的線條。（請看下圖）
應用實例
border-radius可以用來製作很生動的效果。可以點擊下面的鏈接查看：
border-radius結合Gradients、Box Shadow寫的Opra Logo with CSS
兼容Firefox老的版本
爲了兼容Firefox3.6及以下版本，需要寫上供應商前綴，爲-moz-border-radius:5px，對於每個角的語法，則爲：-moz-border-radius-topleft:5px;要特別注意這與標準寫法不同。