一，語法解釋
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]
<length>： 由浮點數字和單位標識符組成的長度值。不可為負值。
其中每一個值可以為 數值或百分比的形式。
如果“/”前后的值都存在，那么“/”前面的值設置其水平半徑，“/”后面值設置其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設置的，與margin,padding等的縮寫類似。
1、border-radius: [ <length>{1,4} ]; //這里只有一個值，那么top-left、top-right、bottom-right、bottom-left四個值相等
2、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ; //這里設置兩個值，那么top-left等於bottom-right，並且取第一個值；top-right等於bottom-left，並且取第二個值
3、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有三個值，其中第一個值是設置top-left;而第二個值是top-right和bottom-left並且他們會相等,第三個值是設置bottom-right
4、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有四個值，其中第一個值是設置top-left;而第二個值是top-right,第三個值bottom-right,第四個值是設置bottom-left
除了上述的簡寫外，還可以和border一樣，分別寫四個角，如下：
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”等，但是IE和Opera沒有私有格式，因此為了最大程度的兼容瀏覽器，我們需要設置如下： -webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
為了不管是新版還是老版的各種內核瀏覽器都能支持border-radius屬性，那么我們在具體應用中時需要把我們的border-radius格式改成：
-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
三、應用
1. 圓形。注意：同時設置4個角落的形狀的半徑的時候不能超過50%;
2.設置橢圓時常用寫法。
border-radius: 100px 10px / 100px 10px;
"/" 之前代表: top top bottom bottom
"/" 之后代表: left right right left
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
3、對於border-radius還有一個內半徑和外半徑的區別，它主要是元素 邊框值較大時，效果就很明顯，當我們border-radius半徑值小於或等於border的厚度時，我們邊框內部就不具有圓角效果,例如下面的實例
.border-big { border: 15px solid green; border-radius: 15px; }
效果：
我們接着上面這個例子，把 border-radius半徑值改成比邊框值大一點：
.border-small { border: 15px solid green; border-radius: 25px; }
效果：
border-radius的內徑值是等於外徑值減去邊框厚度值，當他們的值為負時,border-radius的值不能為負值，內徑默認為0。同時也說明border-radius的內外曲線的圓心並不一定是一致的。只有當邊框厚度為0時，我們內外曲線的圓心才會在同一位置。
4、border-radius能應用在各種元素中，但在img和table應用時會有點差別的，首先先來看圖片上應用border-radius時的情況。在img上應用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對圖片進行剪切，我們先來看一個實例：
img { border: 5px solid green; border-radius: 15px; }
我們來看其在各瀏覽器下的效果：
左圖是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我們可以看得出，圖片根本就沒有圓角效果，右圖是在Firefox4.0下的效果，低於這個版本的和左圖一樣效果，如果需要達成一致效果，大家就必須放棄border-radius而采用CSS2制作圓角的老辦法。另外table的樣式屬性border-collapse是collapse時,border-radius不能正常顯示,只有border-collapse: separate;時才能正常顯示。
5、紅心
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
6、無窮大符號
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}