CSS 边框样式

本节我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。

关于边框样式的四个属性：

属性	描述
border-width	设置边框的宽度
border-style	设置边框的样式
border-color	设置边框的颜色
border	在一个声明中设置所有的边框属性

border-width

border-width 属性用于设置边框的宽度，也就是边框的粗细。

常用属性值如下所示：

属性值	描述
thin	定义细的边框
medium	默认，定义中等的边框
thick	定义粗的边框
length	自定义边框的宽度，单位为像素px
inherit	规定应该从父元素继承边框宽度

我们一般会使用 length 作为 border-width 属性的属性值，即设置边框的粗细为多少像素，例如 1px、2px、3px 等。border-width 属性可以同时为所有边框设置宽度，也可以单独地为每个边框设置宽度。

示例：

为上、右、下、左四个边框分别设置边框粗细：

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

根据简写属性 border-width，我们也可以直接写成：