CSS 邊框

border-style

border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。

CSS 樣式	顯現結果
p {border-style:solid;}	實線
p {border-style:dashed;}	虛線
p {border-style:double;}	雙線
p {border-style:dotted;}	點線
p {border-style:groove;}	凹線
p {border-style:ridge;}	凸線
p {border-style:inset;}	嵌入線
p {border-style:outset;}	浮出線

border-width

border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。

CSS 樣式	顯現結果
p {border-width:9px; border-style:solid;}	邊框寬度為 9px
p {border-width:medium; border-style:dashed;}	邊框寬度為中等

border-color

border-color 屬性是用來設定邊寬的顏色。

舉例如下：

CSS 樣式	顯現結果
p {border-color:#0000FF; border-style:solid;}	藍色邊框
p {border-color:red; border-style:dotted;}	紅色邊框

border-top-, border-left-, border-bottom-, border-right-

我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說， border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：

CSS 樣式	顯現結果
p {border-top-style:solid; border-bottom-style:dotted;}	例1：上邊框為實線，下邊框為點線
p {border-top-style:solid; border-top-width:medium;}	例 2：上邊框為實線，且寬度中等
p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;}	例3：左邊框為實線，下邊框為虛線，且顏色為綠色

border

若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

舉例來說，若我們有以下的 CSS 碼，

p {   border:#0000FF 5px solid; }

那以下的 HTML，

<p>用一行來宣佈所有邊框的屬性</p>

會顯現出

用一行來宣佈所有邊框的屬性