在本教程中，我们将学习CSS边框。

在上图中，黄色区域是蓝色突出显示的元素的边框。

边框

顾名思义，Border用于为元素创建边框。
我们可以使用border属性来改变元素边框的颜色，宽度和样式。

子元素可以从父元素继承边框样式。

边框样式

我们使用border-style属性来设置边框的样式。

边框样式的关键字为虚线，虚线，双精度，凹槽，插入，起始，脊，实心和无。

当border-style属性设置为`none'时，该元素将不显示边框。

In the following example we have set the border style to solid.

div {
	border-style : solid;
}

边框风格全部4面

我们可以使用以下属性分别设置每侧的边框样式。

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

在下面的示例中，我们设置了具有类"容器"的div元素各边的边框样式。

div.container {
	border-top-style : solid;
	border-right-style : dashed;
	border-bottom-style : double;
	border-left-style : dotted;
}

这是一个示例段落。

边框样式速记

我们可以使用以下速记来设置两侧的边框样式。

div {
	border-style : solid dashed dotted double;
}

这是一个示例段落。

上面的规则将设置：

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = dotted
• border-left-style = double

div {
	border-style : solid dashed double;
}

这是一个示例段落。

上面的规则将设置：

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = double
• border-left-style = dashed

div {
	border-style : solid dashed;
}

这是一个示例段落。

上面的规则将设置：

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = solid
• border-left-style = dashed

div {
	border-style : dashed;
}

这是一个示例段落。

上面的规则将设置：

• border-top-style = dashed
• border-right-style = dashed
• border-bottom-style = dashed
• border-left-style = dashed

边框宽度

我们使用border-width属性来设置边框的宽度。

只有在定义border-style属性后，才会应用border-width的值。

border-width的值可以是长度(px，cm，mm等)，也可以是以下任何一个关键字-thin，medium和thick。

在下面的示例中，我们以某些不同的格式设置了边框宽度。

div {
	border-width : 2px;
}

div.blue {
	border-width : thin;
}

div.red {
	border-width : medium;
}

div.green {
	border-width : thick;
}

所有4边的边框宽度

我们可以使用以下属性分别设置每边的边框宽度。

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

在下面的示例中，我们设置了具有类"容器"的div元素各边的边框宽度。

div.container {
	border-top-width : 2px;
	border-right-width : thin;
	border-bottom-width : medium;
	border-left-width : thick;
}

这是一个示例段落。

边框宽度速记

我们可以使用以下速记来设置每边的边框宽度。

div {
	border-width : 1px thin medium thick;
}

这是一个示例段落。

上面的规则将设置：

• border-top-width = 1px
• border-right-width = thin
• border-bottom-width = medium
• border-left-width = thick

div {
	border-width : thin medium thick;
}

这是一个示例段落。

上面的规则将设置：

• border-top-width = thin
• border-right-width = medium
• border-bottom-width = thick
• border-left-width = medium

div {
	border-width : thin thick;
}

这是一个示例段落。

上面的规则将设置：

• border-top-width = thin
• border-right-width = thick
• border-bottom-width = thin
• border-left-width = thick

div {
	border-width : 1px;
}

这是一个示例段落。

上面的规则将设置：

• border-top-width = 1px
• border-right-width = 1px
• border-bottom-width = 1px
• border-left-width = 1px

边框颜色

我们使用border-color属性来设置边框的颜色。
该值可以是十六进制，颜色名称，rgb和rgba格式。

在以下示例中，我们以某些不同的格式设置了边框颜色。

div {
	border-color : #333;
}

div.blue {
	border-color : blue;
}

div.red {
	border-color : rgb(255, 0, 0);
}

div.green {
	border-color : rgba(0, 255, 0, 1);
}

边框颜色全部4面

我们可以使用以下属性分别为每侧的边框着色。

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

在以下示例中，我们设置了具有类"容器"的div元素各边的边框颜色。

div.container {
	border-top-color : red;
	border-right-color : #f00;
	border-bottom-color : rgb(0, 255, 0);
	border-left-color : rgba(0, 0, 255, 1);
}

这是一个示例段落。

边框颜色速记

我们可以使用以下速记来设置每侧的边框颜色。

div {
	border-color : red green blue yellow;
}

这是一个示例段落。

上面的规则将设置：

• border-top-color = red
• border-right-color = green
• border-bottom-color = blue
• border-left-color = yellow

div {
	border-color : red yellow blue;
}

这是一个示例段落。

上面的规则将设置：

• border-top-color = red
• border-right-color = yellow
• border-bottom-color = blue
• border-left-color = yellow

div {
	border-color : red blue;
}

这是一个示例段落。

上面的规则将设置：

• border-top-color = red
• border-right-color = blue
• border-bottom-color = red
• border-left-color = blue

div {
	border-color : red;
}

这是一个示例段落。

上面的规则将设置：

• border-top-color = red
• border-right-color = red
• border-bottom-color = red
• border-left-color = red

边框的简写

为了设置边框样式，宽度和颜色，我们可以使用以下速记。

div {
	border : 1px solid #333;
}

这是一个示例段落。

上面的规则将设置：

• border-width = 1px
• border-style = solid
• border-color = #333

div {
	border-top : 1px solid red;
	border-right : 2px dashed blue;
	border-bottom : 3px dotted green;
	border-left : 4px double black;
}

这是一个示例段落。

上面的规则将设置：

• border-top-width = 1px
• border-top-style = solid
• border-top-color = red
• border-right-width = 2px
• border-right-style = dashed
• border-right-color = blue
• border-bottom-width = 3px
• border-bottom-style = dotted
• border-bottom-color = green
• border-left-width = 4px
• border-left-style = double
• border-left-color = black