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;要特別注意這與標準寫法不同。

另外一種解釋：

《CSS3 入門教程系列》前一篇文章詳細介紹了 CSS3 RGBA 特性的用法，今天這篇文章我們在一起來看看 CSS3 中用於實現圓角效果的  屬性的具體用法。

　　以前製作圓角效果，我們都需要使用多張圓角圖片做為背景分別應用到每個角上，我應用最多的就是在需要圓角的元素標籤中加四個空標籤，然後在每個空標籤中應用一個圓角的背景位置，然後在對這幾個應用了圓角的標籤進行定位到相應的位置，非常繁瑣。

　　現在有了 CSS3 的 border-radius 特性之後，實現邊框圓角效果就非常簡單了，而且其還有多個優點：一是減少網站維護工作量；二是提高了網站的效能，少了對圖片的 HTTP 的請求，網頁載入速度將變快；三是增加視覺美觀性。

　　既然  有這麼多好處，我們就從他的語法，屬性和屬性值等方面來看其如何應用，又是如何製作圓角，還有就是除了製作圓角他還能製作什麼？有這麼多，那我們就開始吧：

基本語法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值範圍：

　　<length>： 由浮點數字和單位識別符號組成的長度值。不可為負值。

簡單說明：

　　border-radius 是一種縮寫方法。如果“/”前後的值都存在，那麼“/”前面的值設定其水平半徑，“/”後面值設定其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設定的其主要會有下面幾種情形出現：

　　1、只有一個值，那麼 top-left、top-right、bottom-right、bottom-left 四個值相等。

　　2、有兩個值，那麼 top-left 等於 bottom-right，並且取第一個值；top-right 等於 bottom-left，並且取第二個值

　　3、有三個值，其中第一個值是設定top-left;而第二個值是 top-right 和 bottom-left 並且他們會相等,第三個值是設定 bottom-right。

　　4、有四個值，其中第一個值是設定 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設定 bottom-left。

　　前面，我們主要看了 border-radius 的縮寫格式，其實 border-radius 和 border 屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這裡我規納一點，他們都是先Y軸在X軸，具體看下面：

1 2 3 4

border-top-left-radius: <length>  <length>   //左上角 border-top-right-radius: <length>  <length>  //右上角 border-bottom-right-radius:<length>  <length>  //右下角 border-bottom-left-radius:<length>  <length>   //左下角

　　這裡說一下，各角拆分出來取值方式：<length> <length> 中第一個值是圓角水平半徑，第二個值是垂直半徑,如果第二個值省略，那麼其等於第一個值，這時這個角就是一個四分之一的圓角，如果任意一個值為0，那麼這個角就不是圓角。

　　border-radius 只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支援 border-radius 標準語法格式，對於老版的瀏覽器，border-radius 需要根據不同的瀏覽器核心新增不同的字首，比說 Mozilla 核心需要加上“-moz”，而 Webkit 核心需要加上“-webkit”等，那麼我為了能相容各大核心的老版瀏覽器，我們看看 border-radius 在不同核心瀏覽器下的書寫格式：

　　1、Mozilla(Firefox, Flock等瀏覽器)

1 2 3 4

-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角

　　等價於：

1	-moz-border-radius: //簡寫

　　2、WebKit (Safari, Chrome等瀏覽器)

1 2 3 4

-webkit-border-top-left-radius:  //左上角 -webkit-border-top-right-radius:  //右上角 -webkit-border-bottom-right-radius:  //右下角 -webkit-border-bottom-left-radius:  // 左下角

   等價於：

1	-webkit-border-radius:  //簡寫

　　3、Opera瀏覽器：