在CSS样式开发中，border-width和border-style是控制元素边框效果的两个核心属性，前者决定边框的粗细，后者决定边框的显示样式，二者配合才能正常展示出边框效果。
border-width属性详解
border-width用于设置边框的宽度，也就是边框的粗细程度，它的取值可以分为以下几类：
- 长度值：支持px、em、rem等单位，比如1px、0.2em，是最常用的取值方式
- 关键字：thin（细边框，通常对应1px）、medium（中等边框，通常对应3px）、thick（粗边框，通常对应5px）
- 百分比：部分浏览器支持，但是实际开发中很少使用
border-width支持单独设置四个方向的边框宽度，写法规则如下：
/* 四个方向都设置为2px */
.box1 {
border-width: 2px;
}
/* 上2px 左右3px 下4px */
.box2 {
border-width: 2px 3px 4px;
}
/* 上2px 右3px 下4px 左5px */
.box3 {
border-width: 2px 3px 4px 5px;
}
/* 单独设置某个方向的边框宽度 */
.box4 {
border-top-width: 2px;
border-right-width: 3px;
border-bottom-width: 4px;
border-left-width: 5px;
}
border-style属性详解
border-style用于设置边框的样式，只有设置了非none的border-style值，边框才会正常显示，否则即使设置了border-width也不会出现边框。常用的border-style取值如下：
| 取值 | 含义 |
|---|---|
| none | 无边框，默认值 |
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点状边框 |
| double | 双线边框，两条线的宽度和间隔之和等于border-width的值 |
| groove | 3D凹槽边框 |
| ridge | 3D垄状边框 |
| inset | 3D内嵌边框 |
| outset | 3D外嵌边框 |
和border-width类似，border-style也支持四个方向的单独设置，写法规则一致：
/* 四个方向都设置为实线 */
.box5 {
border-style: solid;
}
/* 上实线 左右虚线 下点状 */
.box6 {
border-style: solid dashed dotted;
}
/* 单独设置某个方向的边框样式 */
.box7 {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}
两个属性的简写写法
实际开发中，我们通常会使用border简写属性同时设置border-width、border-style和border-color，三个属性的顺序没有强制要求，但是一般推荐按照宽度、样式、颜色的顺序书写，其中border-style是必须设置的属性，否则边框不会显示。
/* 简写设置：2px宽的实线红色边框 */
.box8 {
border: 2px solid red;
}
/* 简写设置：上边框2px实线，左右边框3px虚线，下边框4px点状 */
.box9 {
border-width: 2px 3px 4px;
border-style: solid dashed dotted;
border-color: #333 #666 #999;
}
常见问题说明
很多开发者会遇到设置了border-width但是边框不显示的问题，大多是因为没有设置border-style或者border-style设置为了none。另外需要注意，border-width的取值如果设置为0，即使border-style不是none，边框也不会显示，因为宽度为0的边框没有可见区域。
如果需要单独修改某个方向的边框，优先使用单独的方向属性，比如border-top-width、border-left-style，这样不会影响其他方向的边框设置，减少样式冲突的概率。
注意：border-style的取值中，groove、ridge、inset、outset属于3D样式，效果依赖浏览器的渲染实现，不同浏览器下可能会有细微差异，实际项目中如果需要统一的边框效果，优先使用solid、dashed、dotted等基础样式。
cssborder-widthborder-style边框设置修改时间：2026-07-11 23:42:23