通过 border 样式属性我们能为一个元素设置它的边框， border 是 border-width 、 border-style 、 border-color 的缩写。

在下例中设置了一个宽度为 6px、样式为圆点、颜色为 teal 的边框。

$$tip

outline 与 border 的区别在于， outline 不占据空间，而 border 占据空间。 outline 不能设置单条边的样式，而 border 可以。

边框宽度

border-width 可以用以设置边框的宽度，有以下取值：

长度
thin：细边框
medium：中等边框
thick：粗边框

$$tip

thin 、 medium 、 thick 在不同浏览器上粗细效果不同，因此不推荐使用。

当设置的值数量不同时效果也会不同：

/* 设置所有边的宽度为 2px */
border-width: 2px;
/* 设置上下边框为 2px，左右边框为 3px */
border-width: 2px 3px;
/* 设置上边框为 2px， 左右边框为 3px， 下边框为 4px （不推荐）*/
border-width: 2px 3px 4px;
/* 设置上边框为 2px， 右边框为 3px， 下边框为 4px， 左边框为 5px */
border-width: 2px 3px 4px 5px;

或者可以设置单个边框宽度：

/* 上边框宽度 */
border-top-width: 1px;
/* 下边框宽度 */
border-bottom-width: 1px;
/* 左边框宽度 */
border-left-width: 1px;
/* 右边框宽度 */
border-right-width: 1px;

边框样式

border-style 可以用以设置边框的样式，有以下取值：

取值	效果	描述
none	<div style="width: 40px; height: 40px; border: none 6px teal; background-color: pink;"></div>	默认值，没有边框。
solid	<div style="width: 40px; height: 40px; border: solid 6px teal; background-color: pink;"></div>	实线。
dotted	<div style="width: 40px; height: 40px; border: dotted 6px teal; background-color: pink;"></div>	圆点。
dashed	<div style="width: 40px; height: 40px; border: dashed 6px teal; background-color: pink;"></div>	虚线。
double	<div style="width: 40px; height: 40px; border: double 6px teal; background-color: pink;"></div>	双实线。
groove	<div style="width: 40px; height: 40px; border: groove 6px teal; background-color: pink;"></div>	雕刻效果。
ridge	<div style="width: 40px; height: 40px; border: ridge 6px teal; background-color: pink;"></div>	浮雕效果。
inset	<div style="width: 40px; height: 40px; border: inset 6px teal; background-color: pink;"></div>	陷入效果。
outset	<div style="width: 40px; height: 40px; border: outset 6px teal; background-color: pink;"></div>	突出效果。

与边框宽度类似，当设置的值数量不同时效果也会有所不同：

/* 设置所有边的颜色为 dotted */
border-style: dotted;
/* 设置上下边框为 dotted，左右边框为 dashed */
border-style: dotted dashed;
/* 设置上边框为 dotted，左右边框为 dashed，下边框为 double （不推荐） */
border-style: dotted dashed double;
/* 设置上边框为 dotted， 右边框为 dashed， 下边框为 double， 左边框为 ridge */
border-style: dotted dashed double ridge;

与边框宽度类似，可以设置单个边框样式：

/* 上边框样式 */
border-top-style: dotted;
/* 下边框样式 */
border-bottom-style: dotted;
/* 左边框样式 */
border-left-style: dotted;
/* 右边框样式 */
border-right-style: dotted;

边框颜色

border-color 可以用来定义边框的颜色。

与边框宽度类似，当设置的值数量不同时效果也会有所不同：

/* 设置所有边的颜色为 red */
border-color: red;
/* 设置上下边框为 red，左右边框为 yellow */
border-color: red yellow;
/* 设置上边框为 red，左右边框为 yellow，下边框为 blue （不推荐） */
border-color: red yellow blue;
/* 设置上边框为 red， 右边框为 yellow， 下边框为 blue， 左边框为 green */
border-color: red yellow blue green;

与边框宽度类似，可以设置单个边框颜色：

/* 上边框颜色 */
border-top-color: red;
/* 下边框颜色 */
border-bottom-color: red;
/* 左边框颜色 */
border-left-color: red;
/* 右边框颜色 */
border-right-color: red;

练习

实现以下的效果。

$$demo

<style>

.box { width: 100px; height: 100px; border-width: 6px; border-color: teal pink; border-style: dotted dashed; }

</style>