在 CSS 中常见的边框 (border) 属性有以下几种：
border-style
border-width
border-color
border-top-, border-left-, border-bottom-, border-right-
border
border-style
border-style 属性指定边框的样式。以下的表格列出这个属性可能有的值，以及每一个值显现出来的结果。
| css样式 | 效果 |
| p {border-style:solid;} | 实线 |
| p {border-style:dashed;} | 虚线  |
| p {border-style:double;} | 双实线 |
| p {border-style:dotted;} | 点线  |
| p {border-style:groove;} | 凹线 |
| p {border-style:ridge;} | 凸线 |
| p {border-style:inset;} | 嵌入线 |
| p {border-style:outset;} | 浮出线 |
border-width
border-width 属性是用来设定边框的宽度。可用的值为 thin (薄)、medium (中等)、thick (厚)，或是一个数字。
示例
p {border-width:9px; border-style:solid;}意思为边框宽度为9px
p {border-width:medium; border-style:dashed;}边框宽度为中等
border-color
border-color 属性是用来设定边宽的颜色。
举例如下：
p {border-color:#0000FF; border-style:solid;}效果
p {border-color:red; border-style:dotted;}效果
border-top-, border-left-, border-bottom-, border-right-
我们可以将方向 (top - 上、bottom - 下、left - 左、right - 右) 和样式、宽度、及颜色合起来而成为一个属性。举例来说， border-top-style 属性就是用来设定上边框的样式。 以下举几个例子：
| css样式 | 效果 |
| p {border-top-style:solid; border-bottom-style:dotted;} |  上边框为实线，下边框为点线 |
| p {border-top-style:solid; border-top-width:medium;} | 上边框为实线，且宽度中等 |
p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;} | 左边框为实线，下边框为虚线，且颜色为绿色 |
border
若四边的边框属性都一样，那我们可以用一个 border 属性来描述，而不必四个边都描述一次。另外，我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。
举例来说，若我们有以下的 CSS 码，
p {
border:#0000FF 5px solid;
}那以下的 HTML，
<p>用一行来宣佈所有边框的属性</p>
效果
用一行来设置所有边框的属性
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程