css border-color 邊框顏色 - CSS 學習筆記

css border-color 邊框顏色屬性很簡單，只有一個重要參數，就是顏色的表示，學會怎麼用 border-color 的基本寫法，可以套用在 DIV 區塊、span 區域、表格邊框 ... 等地方，讓整個網頁變得更加美觀，而且早期用 HTML 設計網頁的時候，其實很少會去處理邊框，因為原生的 HTML 語法比較簡單，對於元素邊框要處理得很細膩並不好搞，還好現在有 CSS 的出現，用 border-color 增加網頁元素邊框真的超簡單。

CSS border-color 寫法

border-color: 顏色;

是不是很簡單呢？border-color 只有一個參數，就是顏色。為了讓剛開始學習 css 或網頁設計的朋友更清楚什麼叫做＂顏色＂，其實就是用來表示＂顏色＂的碼，例如顏色的英文單字、RGB 色碼、十六進位色碼都是，css border-color 都可以接受。

css border-color 邊框顏色範例一、替 DIV 增加邊框顏色

範例一的結果長這樣

這是一個綠色邊框的區塊

有看到了嗎？範例一使用的「border-color:green;」代表邊框要用綠色呈現，你也可以嘗試改用其他種顏色設計看看。值得注意的是 css border-color 必須與 border-width、border-style 搭配在一起才會有效果，其中 border-width 是邊框的粗細、border-style 是邊框的樣式。

這兩篇的內容也會有與 border-color 搭配的範例。

css border-color 邊框顏色範例二、替表格增加邊框顏色

範例二的結果長這樣

表格欄位

範例二的 css style 與範例一的是完全一樣的，主要是想呈現出同樣的邊框效果，儘管用在不同的網頁元素中，css border-color 依然能夠有同樣的表現，這也是 css 厲害的地方，同樣的概念卻可以套用在不同的網頁元素。

深入研究表格邊框顏色設計，請看：修改 HTML Table 表格邊框顏色。

css border-color 屬於 css border 家族的一部分，請參閱：CSS border 元素邊框設計。