border-radius屬性詳解
這個borde-radius屬性其實也是一個簡寫值，它分別是 border-top-left-radius（左上圓角半徑）, border-top-right-radius（右上圓角半徑）, border-bottom-right-radius （右下圓角半徑）,border-bottom-left-radius（左下圓角半徑），如下圖所示：
說到半徑，我突然想起來了以前數學中學過關於圓跟半徑的關係，百科如下：
在圓中，連線圓心和圓上任意一點的線段叫做圓的半徑。通常用字母r來表示。
在球中，連線球心和球面上任意一點的線段叫做球的半徑。
正多邊形所在的外接圓的半徑叫做圓內接正多邊形的半徑。
css中的radius多少也跟圓扯上關係，不過要分橢圓還是圓，因為css中分了垂直半徑和水平半徑。而幾何中的圓只要確定了半徑就可以畫出一個圓出來。css中圓角，當使用一個值時，確定為圓角；當使用兩個值時，確定一個橢圓圓角，但是不管是圓角還是橢圓角其實都有點像是背景和設定這個圓角半徑的重疊產生的，瀏覽器會去除他們的沒有交集的部分，留下有交集的部分，像CDR裡面兩個有交集的圖形使用的相交。
可能一開始很難了解，不妨往下看吧。
說完了大概的東東，那麼問題來了，圓角邊框具體值有哪些，莫急少年，上w3c找碼去。
對於border-radius，w3c的解釋在右側：
border-*-radius
| 屬性名: | border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius |
|---|---|
| 屬性值: | [ <length> | <percentage> ]{1,2} |
| 初始值: | 0 |
| 應用於: | 除表單元格邊框為collapse的所有元素 |
| 繼承性: | 無 |
| 計算值: | 兩個長度，分別 <length> 或 percentages |
w3c屬性值詳解：
[ <length> | <percentage> ]：必須出現一個值，可長度可百分比，比如：border-top-left-radius:5px
border-top-left-radius:5px
50%都是可行{1,2}： 表示他們的值最小可以重複一次，最大可重複兩次。假如只有一個值，表示圓角，那麼它的水平距離和垂直距離相等，即第二個值複製第一個值；假如是兩個值，那麼確定一個橢圓角，第一個值橢圓的水平半徑，第二值為橢圓的垂直半徑，說起來有點拗口，直接上圖：
只有1個值，如：border-top-left-radius:50px，表示半徑為50px圓，如圖：
標註錯誤了，盒子尺寸為：300*100
假如有兩個值，如：border-top-left-radius:50px 100px，表示水平半徑為50px，垂直半徑為100px的橢圓，如圖：
同理 border-top-right-radius（右上圓角半徑）, border-bottom-right-radius （右下圓角半徑）,border-bottom-left-radius（左下圓角半徑），也是如此。你只要記住當某個角為一個值時，確定是一個圓，當使用兩個值確定一個橢圓。
你可以輕戳右側的demo：左上角為圓角和橢圓角demo