页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框所显示出来的外观。CSS中分别使用border-style、border-width和border-color这三个属性设定边框的三个方面。
1、border-style属性
border-style属性用于设定边框的样式，也就是风格。设定边框格式是边框最重要的部分，它主要用于为页面元素添加边框。CSS设定了9种边框样式，如表4-5所示。
表4-5 边框样式
属性值 | 描述 |
none | 无边框，无论边框宽度设为多大 |
dotted | 点线式边框 |
dashed | 破折线式边框 |
solid | 直线式边框 |
double | 双线式边框 |
groove | 槽线式边框 |
ridge | 脊线式边框 |
inset | 内嵌效果的边框 |
outset | 突起效果的边框 |
在没有设定边框颜色的情况下，groove、ridge、inset和outset边框默认的颜色是灰色。dotted、dashed、solid和double这四种边框的颜色基于页面元素的color值。
其实，这几种边框样式还可以分别定义在一个边框中，从上边框开始按照顺时针的方向分别定义边框的上、右、下、左边框样式，从而形成多样式边框。
另外，如果需要单独的定义边框的一条边的样式，则可以使用如表4-6所列的属性来定义。
表4-6 各边样式属性
属性 | 描述 |
border-top-style | 设定上边框的样式 |
border-right-style | 设定右边框的样式 |
border-bottom-style | 设定下边框的样式 |
border-left-style | 设定左边框的样式 |
2、border-width属性
在设定了边框的样式之后，就要根据需要来设定边框的宽度。border-width属性就是用来设定边框宽度，预设有三种属性值：medium、thin和thick，另外还可以自行设置宽度（width）。如表4-7所示。
表4-7 border-width属性
属性值 | 描述 |
medium | 缺省值，中等宽度 |
thin | 比medium细 |
thick | 比medium粗 |
width | 自定义宽度 |
border-width属性其实是border-top-width、border-right-width、border-bottom-width和border-left-width这四个属性的综合属性，分别用于设定上边框、右边框、下边框、左边框的宽度。
3、border-color属性
border-color属性用于设定边框的颜色。除了使用border-color属性外，还可以使用如表4-8列出的属性单独为相应的边设定颜色。
表4-8 各边颜色属性
属性 | 描述 |
border-top-color | 设定上边框的颜色 |
border-right-color | 设定右边框的颜色 |
border-bottom-color | 设定下边框的颜色 |
border-left-color | 设定左边框的颜色 |
4、border属性
border属性集合了上述所介绍的三种属性，为页面元素设定边框的宽度、样式和颜色。格式如下：
border: [border-width] [border-style] [boder-color]
其中，三个属性顺序可以自由调换。使用border属性的子属性可以分别为边框的四个边设定宽度、样式和颜色。border属性如表4-9所示。
表4-9 border属性的子属性
属性 | 描述 |
border-top | 设定上边框 |
border-right | 设定右边框 |
border-bottom | 设定下边框 |
border-left | 设定左边框 |
本文来源：https://www.2haoxitong.net/k/doc/fbcaf1687375a417876f8f44.html
文档为doc格式