CSS border-style 邊框樣式設計 - 網頁設計教學站

CSS border-style 的功用是用來設計網頁元素邊框的樣式之用，例如實線、虛線、點線 ... 等特殊樣式，都可以用 border-style 來設計，不過光是用 border-style 還無法清楚的呈現元素邊框的樣式，必須再搭配上邊框顏色（border-color）以及邊框粗細（border-width）才能完整呈現效果，border-style 適用於 DIV 區塊、span 區域、圖片、Table 表格 ... 等元素。

CSS border-style 邊框樣式語法

border-style: 邊框樣式 ;

常用的 border-style 有實線（solid）、點線（dotted）、虛線（dashed）、雙實線（double）、無實線（none）等樣式，另外還有一些比較立體的感覺，例如 outset、groove、ridge、inset 等，可以自己嘗試看看效果如何，另外，css border-style 跟 border-color 以及 border-width 同樣都可以對四個邊獨立設計，而且有替代寫法。

CSS border-style 範例一、四個邊框樣式都一樣

<div style="border-width:3px;border-style:dashed;border-color:pink;padding:4px;">
四個邊框樣式都一樣
</div>

呈現結果

測試邊框樣式

範例一的 border-style 只用了一個樣式 dashed 代表虛線，所以四個邊框樣式都是 dashed。

CSS border-style 範例二、上下邊框樣式一樣、左右邊框樣式一樣

<div style="border-width:3px;border-style:dashed double;border-color:pink;padding:4px;">
上下邊框樣式一樣、左右邊框樣式一樣
</div>

呈現結果

上下邊框樣式一樣、左右邊框樣式一樣

範例二的 border-style 多出了 double 雙實線的樣式，這樣寫代表上下邊框樣式均為虛線 dashed，而左右邊框樣式均為雙實線 double，此順序是 css 基本規則，不可以改變。

CSS border-style 範例三、四個邊框的樣式都不一樣

<div style="border-width:3px;border-style:dashed double solid outset;border-color:pink;padding:4px;">
四個邊框的樣式都不一樣
</div>

呈現結果

四個邊框的樣式都不一樣

範例三的 border-style 共採用了四個樣式，分別代表上邊框 style 為虛線 dashed、右邊框 style 為雙實線 double、下邊框為實線 solid 以及左邊框為較為立體的 outset，四個邊框不同的樣式，設計順序不可以改變。

延伸閱讀