擴展閱讀
本文僅僅做border的基礎使用，想要深入了解的話可以戳以下幾個鏈接，覺得作者寫的很好。
CSS Backgrounds and Borders Module Level 3
邊框與三角形
border:border-width、border-style、border-color
border:style：dotted（點）、dashed（虛線）、solid（實線）、double（雙線輪廓）、其它3D
來看個border繪制三角形的原理：
圖1為border最普遍的用法，border: solid 10px #ffb6b9;。用多了你會不會就覺得border是由四個矩形邊框拼接而成，但其實是錯的。實際上，元素的border是由三角形組合而成，為了說明這個問題，我們繼續看：
圖2，我們為邊框四個方向設置不同顏色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，並加大邊框寬度。
圖3，我們進一步將元素的寬高設為0。我們發現，此時元素由上下左右4個三角形組成。
為了實現一個三角形，那就很簡單了，我們只需將其它border邊的顏色設置為白色或者透明色即可
圖4，border-color: transparent transparent #bbded6;，設置上三角，左右三角為透明，那么我們就能看到一個圖4的三角形了。
邊框半徑：圓角
通過以下屬性設置四個角的半徑：
border-radius
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
如今只有IE8（及更早版本的IE）和Opera Mini不支持border-radius屬性。
創建正圓和膠囊形狀
在給boeder-radius指定百分比時，x軸和y軸分別相對於元素的寬度和高度來計算實際值。換句話說，我們很容易把一個正方形的元素變成圓形，只要把圓角半徑設置成至少50%就好。
同時，元素形狀改變會改變元素的可點擊區域，會以變化后的圓角為基准。
我們可以下圖中左邊的圓，輕輕松松實現了圓形頭像的功能。😄
如果我們想要實現“長圓形”（一個矩陣的兩端各帶一個半圓形，見上圖），百分比和的絕對值都無法實現，除非我們知道元素的大小。但我們可以故意指定一個比所需半徑大的值來得到，border-radius:999em。
邊框圖片
關於邊框圖片，有很多待研究的，比如如何分割、平鋪等等。具體可參考：https://www.w3.org/TR/css-backgrounds-3/#border-images
border-image:圖像路徑 分割方式 邊框厚度 邊框背景圖的擴展 平鋪方式
border-image-source、border-image-slice``border-image-width、border-image-outset、border-image-repeat
邊框陰影
box-shadow:陰影水平偏移值 陰影垂直偏移值 陰影模糊值 陰影外延值 陰影的顏
（以上值均可為負，並且最后可以加上 inset表示是內陰影）
邊框屬性表
