在做網頁的時候，常常需要實現圓角，以前的做法就是切圖，現在好了，有了css3的 border-radius 特性之后，實現邊框圓角效果就非常簡單了，而且其還有多個優點：一是減少網站維護工作量；二是提高了網站的性能，少了對圖片的 HTTP 的請求，網頁載入速度將變快；三是增加視覺美觀性。
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 屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這里我規納一點，他們都是先Y軸在X軸，具體看下面：
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左下角
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等瀏覽器)
-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
等價於：-moz-border-radius: //簡寫
2、WebKit (Safari, Chrome等瀏覽器)
-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角
等價於：-webkit-border-radius: //簡寫
3、Opera瀏覽器
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
等價於：border-radius: //簡寫
4、Trident (IE)
IE9 以下版本不支持 border-radius，而且 IE9 沒有私有格式，都是用 border-radius，其寫法和 Opera 是一樣的，這里就不在重復。
為了不管是新版還是老版的各種內核瀏覽器都能支持 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} ]?
其拆分開來的格式相應需要加上 -moz 和 -webkit，上面的代碼其實就等價於下面的代碼：
-moz-border-radius-topleft: <length> <length> //左上角
-moz-border-radius-topright: <length> <length> //右上角
-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角
一般需求就如下：
.demo { width: 150px; height: 80px; border: 2px solid #f36; background: #ccc;
}
但是有時候也需要拆分開來，如下：
.demo { border-top-left-radius: 10px 20px; border-top-right-radius: 15px 30px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 30px 15px;
}
效果如下：
支持的瀏覽器
如果想查看更詳細的，鏈接地址：http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html