CSS border-color 邊框顏色設計 - 網頁設計教學站

CSS border-color 的用途是用來設計元素邊框的顏色，如 DIV 區塊、span 區域、圖片邊框 ... 等，都可以用 border-color 來設計他們的外邊框顏色，優點是 border-color 允許設計師一次設計四個 border 的外邊框顏色，也可以分別設計各個 border 的外邊框顏色，管理上也相當的便利，border-color 的應用已經相當普遍了，而且幾乎所有的常用瀏覽器都支援 border-color 語法。

CSS border-color 邊框顏色語法

border-color: 顏色 ;

boder-color 的顏色有好幾種表示方式可以選擇，最常見的有十六進位色碼（參考：色碼表）、顏色的英文、RGB 色碼，這個部分就看設計師自己比較習慣用哪種顏色表示。再來要提的是，border-color 的顏色寫法具有邊框方位的意義，能夠一口氣設計四個邊框顏色或分別讓各個邊框顏色都不一樣的秘訣就在此，請看三個範例。

CSS border-color 邊框顏色範例一、四個邊框的顏色都一樣

<div style="border-color:pink;border-width:3px;border-style:solid;padding:4px;">
同時設計四個邊框相同的顏色
</div>

呈現結果

同時設計四個邊框相同的顏色

範例一的 border-color 只寫了一個粉紅色的英文單字 pink，代表四個邊框沒有差異，全部都是粉紅色的。

CSS border-color 邊框顏色範例二、上下邊框顏色一樣、左右邊框顏色一樣

<div style="border-color:pink blue;border-width:3px;border-style:solid;padding:4px;">
上下邊框顏色一樣、左右邊框顏色一樣
</div>

呈現結果

上下邊框顏色一樣、左右邊框顏色一樣

範例二的 border-color 有兩個英文單字，分別為 pink 粉紅色以及 blue 藍色，根據 css border-color 的顏色位置定義，這樣寫代表上下都是粉紅色、左右都是藍色，順序請勿弄反。

CSS border-color 邊框顏色範例三、四個邊框顏色都不一樣

<div style="border-color:pink blue green black;border-width:3px;border-style:solid;padding:4px;">
四個邊框顏色都不一樣
</div>

呈現結果

四個邊框顏色都不一樣

範例三的 border-color 使用了 4 個不同的顏色單字，由左至右分別代表上右下左的順序，也就是上邊框是粉紅色 pink、右邊框是藍色 blue、下邊框是綠色 green 以及左邊框是黑色 black，此順序不可以更動，因為這是 css 的標準規定。

延伸閱讀