無論CSS那個版本，對於CSS製作圓角，想必大家都不會陌生，不過在CSS3到來之前，為了製作圓角是一件很麻煩的事情，記得曾經的一個方法是製作4個空標籤並設定圓角背景，最後分別定位到相應的位置，還有一種不需要圖片的方法是，用多個一畫素的塊級元素疊加，然後設定不同寬度或者高度形成圓角，這種方法相比第一種更加麻煩，但是沒有圖片。border-radius來了，小夥伴們驚呆了，各種犀利的圓角效果竟能如此簡單的寫出來，不用圖片，不用冗餘的程式碼。猛擊 這裡看奧運五環DEMO

屬性名稱：border-radius

取值：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

說明： border-radius是一種縮寫的方法。如果“/”存在，則前面為水平半徑，後面為垂直半徑，如果沒有，則水平垂直半徑相等。如果只有一個值，則按照top-left、top-right、bottom-right、bottom-left的順序排列；有兩個值，則top-left和bottom-right取第一個值，top-right和bottom-left取第二個值；有三個值，則top-left取第一個值，top-right和bottom-left取第二個值，bottom-right取第三個值；有四個值，則全部相等。

相關屬性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

取值：[ <length> | <percentage> ] [ <length> | <percentage> ]?

說明：第一個為水平半徑，第二個為垂直半徑，如果第二個省略則水平垂直半徑相等。如果其中一個為0，則垂直無圓角效果。如果值為百分比，則取值相對於盒模型，水平半徑取值相對於盒模型的寬度，垂直半徑相對於盒模型的高度。

這裡要特別說下，現在網上還有些資料說是要加瀏覽器的私有屬性，可能那些資料有些陳舊，可能有些是直接copy別人的，個人覺得，css3中的border-radius屬性就寫這篇文章時，已經完全沒必要加各種私有屬性，並且把bootstrap3.0轉sass的過程中，發現bt也是這麼做的。

一些程式碼：

border-radius: 10px

等價於：
border-top-left-radius: 10px
border-top-right-radius: 10px
border-bottom-left-radius: 10px
border-bottom-right-radius: 10px

border-radius: 10px 20px 5px / 30px 15px

等價於：
border-top-left-radius: 10px 30px
border-top-right-radius: 20px 15px
border-bottom-left-radius: 5px 30px
border-bottom-right-radius: 20px 15px

一些DEMO：

1. 當radius的值大於作於元素的寬度或者高度時，則radius取元素的寬度或者高度。

width: 100px
height: 100px
background: green
border-top-right-radius: 150px

等價於：
width: 100px
height: 100px
background: green
border-top-right-radius: 100px

效果如下：

2. 當存在border時，如果radius的值小於或者等於border的width值，只有border會有圓角效果

width: 100px
height: 100px
background: green
border: 30px solid blue
border-radius: 30px

效果如下（邊框內的區域四個角無圓角效果）：

如果radius的值大於border的width值時

width: 100px
height: 100px
background: green
border: 30px solid blue
border-radius: 40px

效果如下：

4. 當適用於table元素時，table的border-collapse屬性為collapse時並且border的width不為0時，radius對border沒有效果，而對table的border區域以內的部分有效果，th、td效果同table

.table_1
  background: green
  width: 300px
  height: 100px
  border-radius: 50px
  border: 5px solid blue
  text-align: center
    
.table_2
  width: 300px
  height: 100px
  text-align: center
  td
    background: green
    border-radius: 50px
    border: 5px solid blue

效果如下：

在一般情況下，table的border-collapse屬性一般都會在reset.css中被置為collapse，那如果需要table有邊框並且有圓角怎麼辦呢？ 可以把table的border設定為0並且給之外面加一層div.table_radius，然後設定radius就可以了，這個值針對table哦，td及th無法解決。

.table_radius
  width: 300px
  height: 100px
  border: 5px solid blue
  border-radius: 50px
  text-align: center
  line-height: 100px
  overflow: hidden
.table_1
  width: 100%
  height: 100%
  background: green

效果如下：

1. Android Browser 2.3 does not support % value for border-radius.（做手機端的時候這個bug親身經歷過，目前安卓2.3還有一定的比例，所以建議別用%）

2. Border-radius does not work on fieldset elements in IE9.

3. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property but does support the long-hand properties for each corner like "border-top-left-radius".