CSS 邊框

元素的邊框圍繞填充和內容。

CSS 邊框屬性

CSS 邊框屬性允許你定義框的邊框區域。邊框可以是預定義的樣式，如實線，雙線，虛線等，或者它可以是影象。以下部分將介紹如何設定定義邊框樣式（border-style），顏色（border-color）和寬度（border-width） 的各種屬性。

border-width 屬性

border-width 屬性指定邊框區域的寬度。它是一種速記屬性，用於同時設定元素邊框的所有四邊的厚度。

p {
    border-width: medium 10px thick 15px;
}

注意： 如果 border-width 缺少或未指定屬性的值，則將使用 border-width 預設值（medium）。

border-style 屬性

border-style 屬性設定框邊框的樣式，如： solid， dotted 等。它是一個簡寫屬性，用於設定元素邊框的所有四個邊的線條樣式。

border-style 屬性可採取以下值之一： none ， hidden ， dashed ， dotted ， double ， groove ， inset ， outset ， ridge 和 solid 。

比如

p {
    border-style: dotted;
}

邊框顏色屬性

border-color 屬性指定框的邊框的 color 。這也是一個簡寫屬性，用於設定元素邊框的所有四邊的顏色。

p {
    border-style: solid;
    border-color: #ff0000;
}

注意： border-color 如果單獨使用該屬性，則該屬性不起作用。使用 border-style 屬性首先設定邊框。

border 速記屬性

CSS 屬性 border 是設定一個或多個單獨的邊框屬性的速記屬性，用單一的規則設定 border-style、border-width 和 border-color

p {
    border: 5px solid #ff4500;
}

如果在設定邊框速記屬性時省略或未指定單個邊框屬性的值，則將使用該屬性的預設值（如果有）。

注意： 如果在設定元素的邊框時缺少或未指定屬性 border-color 的值（例如 border: 5px solid;），則元素的 color 屬性的值將用作 border-color 的值。

在此示例中，邊框將是 5px 寬度的純黑線：

p {
    color: black;
    border: 5px solid;
}

但是，對於 border-style ，省略該值將導致根本不顯示邊框，因為 border-style 屬性的預設值為 none 。

在下面的示例中，將沒有邊框：

p {
    border: 5px #00ff00;
}