CSS 中的邊框是圍繞著元素內容和內邊距的一條或多條線段，您可以自定義這些線段的樣式、寬度以及顏色。您可以通過下面幾個屬性分別定義邊框的樣式、寬度和顏色：

border-style：設置邊框的樣式，例如實線、虛線等；

border-width：設置邊框的寬度（厚度）；

border-color：設置邊框的顏色；

border：上面三個邊框屬性的縮寫。

1. border-style

border-style 屬性用來設置元素中所有邊框的樣式，或者單獨為某個邊框設置樣式，其語法格式如下：

border-style: border-top-style border-right-style border-bottom-style border-left-style;

border-style 屬性的可選值如下：

border-style 屬性有多種不同的用法：

如果提供全部的四個參數，則會按照上、右、下、左的順序分別設置邊框四個邊的樣式；

如果提供三個參數，那么第一個參數會作用在上邊框，第二個參數會作用在左、右兩個邊框上，第三個參數會作用在下邊框上；

如果提供兩個參數，那么第一個參數會作用在上、下兩個邊框上，第二個參數會作用在左、右兩個邊框上；

如果只提供一個參數，這個參數將同時作用在四個邊框上。

除了可以使用 border-style 屬性設置元素的邊框樣式外，您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的樣式：

border-bottom-style：設置下邊框的樣式；

border-top-style：設置上邊框的樣式；

border-left-style：設置左邊框的樣式；

border-right-style：設置右邊框的樣式。

【示例】使用 border-style 屬性為元素設置邊框：

運行結果如下圖所示：

2. border-width

border-width 屬性用來設置元素中所有邊框的寬度，或者單獨為某個邊框設置寬度，其語法格式如下：

border-width: border-top-width border-right-width border-bottom-width border-left-width;

border-width 屬性的可選值如下：

thin、medium、thick 三個關鍵字并沒有固定的值，它們的值取決于瀏覽器，例如在 Chrome 瀏覽器中三個關鍵字的值分別為 1px、3px、5px。

同 border-style 屬性相同，border-width 屬性同樣支持多種不同的用法：

如果提供全部的四個參數，則會按照上、右、下、左的順序分別設置邊框四個邊的寬度；

如果提供三個參數，那么第一個參數會作用在上邊框，第二個參數會作用在左、右兩個邊框上，第三個參數會作用在下邊框上；

如果提供兩個參數，那么第一個參數會作用在上、下兩個邊框上，第二個參數會作用在左、右兩個邊框上；

如果只提供一個參數，這個參數將同時作用在四個邊框上。

除了可以使用 border-width 屬性設置元素的邊框寬度外，您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的寬度：

border-bottom-width：設置下邊框的寬度；

border-top-width：設置上邊框的寬度；

border-left-width：設置左邊框的寬度；

border-right-width：設置右邊框的寬度。

【示例】使用 border-width 設置邊框的寬度：

運行結果如下圖所示：

點擊知道更多編程知識

文章來源于網絡