CSS border-style 邊框樣式

CSS 中透過 border-style 設定邊框的樣式，可以一次設定四個邊框，也可以分別設定各個邊框樣式，網頁中的許多元素，特別是 DIV 區塊以及 span 區域的邊框樣式，都可以使用 border-style 來設計，border-style 要能正確顯示，通常會同時包含 border-width（邊框寬度）以及 border-color（邊框顏色）的搭配，幾乎所有的主流瀏覽器都支援 CSS border-style 的邊框樣式屬性。

CSS border-style 設定語法

描述	語法
設定四個邊框樣式	border-style: 樣式;
僅設定上邊框樣式	border-top-style: 樣式;
僅設定右邊框樣式	border-right-style: 樣式;
僅設定下邊框樣式	border-bottom-style: 樣式;
僅設定左邊框樣式	border-left-style: 樣式;

CSS border-style 範例

<div style="border-width:3px;border-style:dashed;border-color:#FFAC55;padding:5px;">
測試邊框樣式
</div>

以上範例輸出結果如

測試邊框樣式

範例中「border-style:dashed」這樣的寫法代表四個邊框的樣式都是虛線（dashed），另外我們還使用了 border-width 來設定邊框的粗細、border-color 設定邊框的顏色，以及 padding 設定文字與邊框間的內距。以下準備了常用到的幾種 border-style 給您參考。

備註、挑選邊框顏色請使用：色碼表。

常用 CSS border-style 樣式表

border-style:solid;	border-style:dotted;	border-style:dashed;
border-style:double;	border-style:outset;	border-style:groove;
border-style:ridge;	border-style:inset;	border-style:none;

最後一個「border-style:none」這樣的寫法，意思是不顯示邊框，效果等同於「border-style:hidden」，不過在大部分的情況下，無論是 DIV 區塊或 span 區域，若未繼承自父層的樣式，預設都是沒有顯示邊框。僅管所有主流的瀏覽器都支援 border-style 的屬性，但以上範例在各瀏覽器中呈現效果可能還是有些許差異，使用前建議多用幾個瀏覽器測試看看。

延伸閱讀