CSS border 語法介紹
border: 邊框粗細 邊框顏色 邊框樣式 ;
標準的 css border 規則由左至右共有三個參數，每個參數間用半形空格隔開，第一個參數為邊框的粗細（border-width），一般使用 px、em 等標準網頁單位，第二個參數標示邊框的顏色（border-color），可以使用色標準色碼或顏色的英文名稱，第三個參數是邊框樣式（border-style），可以設定實線、虛線、雙實線、連續點 ... 等許多不同的風格。
CSS border 語法範例一、直接替 DIV 區塊加上邊框
<div style="border:5px #FFAC55 solid;">
這是邊框測試
</div>
在這個範例中，我們設定 <div> 區塊的邊框寬度是 5px，邊框顏色是淡橘色（#FFAC55）、邊框樣式是實線（solid），呈現效果如下這是邊框測試
</div>
這是邊框測試
在此範例中 border 的寬度與顏色比較沒什麼需要特別說明，依照你的喜愛自己設定即可，除了將邊框的寬度、顏色與 style 寫在一起之外，其實也可以獨立出來寫，例如 border-width（邊框寬度）、border-color（邊框顏色）以及 border-style（邊框款式）。另外，border 可以分別為四個邊做不同的設計，四個方位的表示法：上方為 border-top、右方為 border-right、下方為 border-bottom、左方為 border-left。CSS border 範例二、獨立替四個邊做設計
<style type="text/css">
#BorderBox{
border-top:5px black solid; //上方邊框寬度設為 5px，顏色為黑色
border-right:8px red double; //右邊的邊框寬度設為 8px，顏色為紅色，樣式為 double
border-left:7px yellow dotted; //左邊的邊框寬度設為 7px，顏色為黃色，樣式為 dotted
border-bottom:3px blue dashed; //下方邊框寬度設為 3px，顏色為藍色，樣式為 dashed
padding:30px;
}
</style>
<div id="BorderBox">四個不同的邊框設計</div>
以上範例輸出結果如#BorderBox{
border-top:5px black solid; //上方邊框寬度設為 5px，顏色為黑色
border-right:8px red double; //右邊的邊框寬度設為 8px，顏色為紅色，樣式為 double
border-left:7px yellow dotted; //左邊的邊框寬度設為 7px，顏色為黃色，樣式為 dotted
border-bottom:3px blue dashed; //下方邊框寬度設為 3px，顏色為藍色，樣式為 dashed
padding:30px;
}
</style>
<div id="BorderBox">四個不同的邊框設計</div>
四個不同的邊框設計
每個方向邊框用不同的顏色或風格設計也是設計師常用的一種手法，很容易拼湊出不同的冰紛色彩風格，但還是要與整個網頁風格做搭配才比較好。若你不需要單獨替每個邊做設計，那使用範例一的整合式寫法，一次管理所有的邊框，會比較有效率。備註、挑選邊框顏色請使用：色碼表。
CSS3 提供更強大的網頁元素邊框設計功能，請參閱：CSS3 邊框設計。
相關主題延伸閱讀