一、圓角邊框：IE9.0以前版本不支持
border-radius: 接受8個屬性，前四個為x軸，后四個為y軸，以斜杠划分x軸、y軸，即border-radius:左上較 右上角 右下角 左下角 / 左上角 右上角 右下 角 左下角 ;（x軸/y軸 ），如：border-radius: 100px 0 100px 0/100px 0 100px 0。
順序圖：
原理圖：
原理：
以四個角a，b，c，d 為起點，橫向為x軸，縱向為y軸，以左上角x軸100px，y軸100px兩點之間為弧，四個角交點為圓心的的四分之一圓，同樣右下角也是，即border-radius: 100px 0 100px 0/100px 0 100px 0。
效果一：
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 border-radius: 100px 0 100px 0/100px 0 100px 0; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="div1"></div> 17 </body> 18 </html>
效果二：
原理：
左下角x軸50px,y軸50px;border-radius: 0 0 0 50px/0 0 0 50px;
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 border-radius: 0 0 0 50px/0 0 0 50px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="div1"></div> 17 </body> 18 </html>
效果三：
原理：
div寬度200px,高度100px,四個角x軸100px,y軸50px,即border-radius: 100px/50px;
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 100px; 10 background-color: red; 11 border-radius: 100px/50px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="div1"></div> 17 </body> 18 </html> 19
效果四：
原理：
以100px為半徑：border-radius: 100px，給圓添加100px的border：border:100px solid #ccc，再把要空缺的部分顏色變透明：border-right: 100px solid transparent。
代碼:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .div1{ 8 width: 0px; 9 border-radius: 100px; 10 border:100px solid #ccc; 11 border-right: 100px solid transparent; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="div1"></div> 17 </body> 18 </html>
二、圖像邊框：IE9.0及以下均不支持
border-image:url() 該屬性用於指定邊框寬度（上 右 下 左 ） 背景圖的填充方式（[ stretch | repeat | round ]默認值：stretch ）
）
stretch： 指定用拉伸方式來填充邊框背景圖。
repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。
round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。
如：border-image: url(1.png) 49% repeat; border-image: url(1.png) 125 202 166 166 round;
例子：
使用的背景圖：
效果一：
原理：
上下左右各以166px的距離分割成九塊，a，b，c，d四塊分別為div的四個角，且每個角的背景圖大小會自適應為border的大小，然后兩個角之間的背景圖根據div的boder除去四個角的大小進行拉伸。
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 300px; 9 width: 300px; 10 border-width: 50px; 11 border-image: url(1.png) 166 round; 12 background: #ccc; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
效果二：
原理：
對背景圖上下左右進行100%的切割，即div四個角為整張背景圖，由於切割超過50%，兩個角之間的背景圖沒有重合部分，所以border-image無法進行拉伸。
代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 300px; 9 width: 300px; 10 border-width: 50px; 11 border-image: url(1.png) 100% round; 12 background: #ccc; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>