邊框是CSS盒模型屬性中默默無聞的一個普通屬性，元素的邊框(border)是圍繞元素內容和內邊距的一條或多條線，隨著CSS3的到來，使得邊框屬性重新煥發了光彩，css border屬性允許你規定元素邊框的樣式，寬度和顏色。本文將主要從CSS邊框的5個屬性來詳細介紹CSS邊框屬性。

1、邊框樣式

邊框樣式屬性指定要顯示什么樣的邊界。

border-style屬性用來定義邊框的樣式

border-style 值:

none: 默認無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge: 定義3D脊邊框。效果取決于邊框的顏色值
inset:定義一個3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決于邊框的顏色值

2、邊框寬度

你可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值） 和 thin。

注意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等于 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。

實例

p.one { border-style:solid;     border-width:5px; } p.two { border-style:solid;     border-width:medium; }

3、邊框顏色

border-color屬性用于設置邊框的顏色。可以設置的顏色：

name - 指定顏色的名稱，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16進制值, 如 "#ff0000"

你還可以設置邊框的顏色為"transparent"。

注意： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。

實例：

p.one { border-style:solid;     border-color:red; } p.two { border-style:solid;     border-color:#98bf21; }

4、邊框-單獨設置各邊

在CSS中，可以指定不同的側面不同的邊框：

實例：
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
上面的例子也可以設置一個單一屬性：

實例
border-style:dotted solid;

border-style屬性可以有1-4個值：

border-style:dotted solid double dashed;

上邊框是 dotted

右邊框是 solid

底邊框是 double

左邊框是 dashed

border-style:dotted solid double;

上邊框是 dotted

左、右邊框是 solid

底邊框是 double

border-style:dotted solid;

上、底邊框是 dotted

右、左邊框是 solid

border-style:dotted;

四面邊框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

5、邊框-簡寫屬性

上面的例子用了很多屬性來設置邊框。

你也可以在一個屬性中設置邊框。

你可以在"border"屬性中設置：

border-width

border-style (required)

border-color

實例
border:5px solid red;

當然，上述的5個CSS邊框屬性并不能包含所有的邊框屬性，只是挑選出了CSS邊框中最重要的幾個屬性來講，想要連接CSS邊框的全部屬性，我們可以參考本站的CSS教程中給出的CSS邊框屬性圖，圖中對每個邊框屬性的描述都很精確，想深入學習的小伙伴可以結合CSS邊框屬性圖，徹底弄清楚CSS邊框的知識。