CSS border-width 邊框寬度

CSS border-width 用來設定邊框的寬度，也可以說是設定邊框的粗細，網頁元素的邊框粗細都可以使用 border-width 來設定，例如 DIV 區塊以及 span 區域的邊框寬度，都可以使用 border-width 來設定，另外，border-width 通常會與 border-style（邊框樣式）以及 border-color（邊框顏色）一起使用，來呈現一個完整個邊框視覺設計，所有的主流瀏覽器都支援 css border-width 的屬性語法。

CSS border-width 基本語法

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

CSS border-width 常用單位如 px、em、cm、thin（細）、medium（中等）、thick（粗）等。

CSS border-width 範例一、四個邊的寬度都一樣

<div style="border-color:#aaaaee;border-style:solid;border-width:3px;padding:5px;">
測試邊框寬度效果
</div>

以上範例輸出結果如

測試邊框寬度效果

範例中使用了 border-width:3px 這樣的寫法，代表四個邊框的寬度都一樣為 3px，同時還用了 border-style 與 border-color 等語法，用來呈現完整的邊框風格呈現效果，這幾個屬性缺一不可，除非使用 border 的完整寫法，才能一次包含所有屬性。

CSS border-width 範例二、獨立設定四個邊的寬度

<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px 9px 12px;padding:5px;">
測試邊框寬度效果
</div>

以上範例輸出結果如

測試邊框寬度效果

請注意，若要設定四個邊框不同的寬度，必須依序寫上、右、下、左的寬度，這是 CSS 規定的標準順序，以範例中「border-width:3px 6px 9px 12px;」這樣的寫法，代表上邊框寬度 3px、右邊框寬度 6px;、下邊框寬度 9px、左邊框寬度 12px。

CSS border-width 範例三、上下邊寬的寬度相同以及左右邊框寬度相同

<div style="border-color:#aaaaee;border-style:solid;border-width:3px 6px;padding:5px;">
測試邊框寬度效果
</div>

以上範例輸出結果如

測試邊框寬度效果

範例中「border-width:3px 6px;」這樣的寫法，代表上下邊框寬度都是 3px，而左右邊框寬度都是 6px。CSS border-width 的三種不同寫法，提供設計師相當靈活的設計方式，這三種寫法其實在運作效能方面並沒有太大的差異，純粹讓設計師寫起來比較方便而以，但通常四個邊都設定一樣的寬度時，都只採用第一種最簡單的寫法，這樣在未來管理上，會比較有效率一些。

延伸閱讀