有兩種方法設定元素的各個拐角

1.使用邊界半徑的所對應的各個展開式屬性，分別設定四個拐角。

邊框左上角半徑左上角

邊框右上角半徑右上角

邊框左下角半徑左下角

邊框右下角半徑右下角

2.使用邊界半徑簡寫屬性，從左上角開始以順時針順序應用到元素的各個拐角。

border-radius：1-4長度 | ％ / 1-4長度 | ％ ;

說明：

•  拐角半徑的長度可以用實際長度px em等，也可以用百分比％來表示。
• 斜槓前的值代表四個角的水平半徑，斜槓後值代表四個角的垂直半徑。
• 當四個角為圓角的時候，水平半徑和垂直半徑相等。可以簡寫為border-radius：1-4 length
  | ％
• 當需要設定橢圓形角時，需要分別四個角的水平半徑和垂直半徑，中間用斜槓分隔.border-radius：1-4 length | ％ / 1-4長度 | ％
• 設定四個角的值時，如果省略左下角，則與右上相同。如果省略下偏右，則與左上方相同。如果省略右上方，則與左左相同。

示例：

圓形圓角：

a 分別給四個角設定不同大小的圓角

border-radius：10px 20px 30px 40px;

b 設定對角大小一樣的圓角

border-radius：10px 40px 10px 40px;

簡寫為： border-radius：10px 40px; 

C.設定右上角和左下角一樣的圓角

border-radius：10px 50px 30px 50px

簡寫為： border-radius：10px 50px 30px

d。給四個角設定大小一樣的圓角

border-radius：10px 10px 10px 10px;

簡寫為：邊界半徑：10px的;

橢圓圓角

e.當給四個角提供不同的水平和垂直半徑。在斜槓前指定1-4個值，斜槓後指定另一個1-4個值。即可形成橢圓圓角。

border-radius：10px 10px 10px 10px / 20px 20px 20px 20px;

簡寫為：border-radius：10px / 20px;

f. 當水平半徑和垂直半徑一致時，就變成了圓形圓角。

border-radius：10px / 10px;

簡寫為我們熟悉的邊界半徑：10px的;

更多應用例項詳見博文“ CSS3 border-radius應用例項 ”