CSS border-color 邊框顏色

CSS border-color 是用來設定邊框顏色的，例如常常用來設定 DIV 或 span 的邊框顏色，他可以一次設定四個邊框的顏色都一樣，也可以分別設定各個邊框的顏色，另外可以搭配 border-style（邊框樣式）、border-width（邊框寬度）來呈現不同的風格，需要注意的是如果邊框寬度為零（border-width:0px）、邊框樣式為 none 或 hidden（border-style:none 或 border-style:hidden）都不會顯示邊框顏色。

CSS border-color 基本語法

描述	語法
一次設定四個邊框的顏色	border-color: 顏色;
分別設定四的邊框的顏色	border-color: 上邊框顏色右邊框顏色下邊框顏色左邊框顏色;
分別設定上下邊框以及左右邊框	border-color: 上下邊框顏色左右邊框顏色;

常用的語法技巧有上表中的三種，若四的邊框的顏色都是一樣的，就用第一種簡易的語法，一次規定四邊的顏色，未來管理也比較容易，若要設計出四個邊都不同顏色，則必須使用第二種語法，顏色依序為上、右、下、左，這是 CSS 的標準順序，無法更改。

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

<div style="border-color:#aaaaee;border-width:3px;border-style:solid;padding:5px;">
測試四個邊都是一樣的顏色
</div>

以上範例輸出結果如

測試四個邊都是一樣的顏色

以上範例中最重要的是「border-color:#aaaaee;」用來設定邊框的顏色，你也可以使用色碼表來找其他不同的顏色（開啟色碼表），另外我們還使用了 border-width 來增加邊框的寬度、border-style 顯示邊框的樣式以及 padding 增加文字與邊框間的距離，這些屬性都只是用來讓範例更清楚呈現，另外也讓瀏覽器知道我們想要呈現的風格。

CSS border-color 範例二、分別設定各個邊框的顏色，語法如下

<div style="border-color:blue red green yellow;border-width:3px;border-style:solid;padding:5px;">
測試四個邊都是不一樣的顏色
</div>

範例呈現結果如

測試四個邊都是不一樣的顏色

代表的意思是上邊框藍色、右邊框黑色、下邊框紅色、左邊框綠色。如果上下相同顏色，左右相同顏色，也可以用簡化的寫法來達到，看看下方這個範例馬上了解。

CSS border-color 範例三、上下相同顏色以及左右相同顏色的邊框

<div style="border-color:blue yellow;border-width:3px;border-style:solid;padding:5px;">
上下相同顏色以及左右相同顏色的邊框
</div>

範例呈現結果如

上下相同顏色以及左右相同顏色的邊框

範例中「border-color:blue yellow;」這樣的寫法代表上下邊框都是藍色，左右邊框都是黃色。border-color 的値不一定是英文，可以直接給色碼（通常也是這樣），另外 border-color 有個値是 transparent，代表的是透明邊框，但是在 IE6 或是更老舊的 IE 版本並不支援，所以盡量不要使用比較好，如果不要顯示邊框，可以直接透過 border-width 或 border-style 來達到。

延伸閱讀