CSS中控制边框样式的核心属性是border-style，通过该属性的不同取值可以快速实现实线、虚线、点线等多种边框效果，开发者可以根据页面设计需求灵活选择对应的取值。
border-style属性基础说明
border-style是用来设置元素四条边框样式的基础属性，它属于CSS边框相关属性的一部分，和border-width、border-color配合可以完整定义边框的显示效果。该属性可以接收1到4个取值，分别对应上、右、下、左四条边框的样式，取值数量不同时的对应规则如下：
- 1个取值：四条边框都使用该样式
- 2个取值：第一个对应上下边框，第二个对应左右边框
- 3个取值：第一个对应上边框，第二个对应左右边框，第三个对应下边框
- 4个取值：依次对应上、右、下、左边框
常见border-style取值及效果
border-style有多个预设取值，其中常用的和虚线、实线、点线相关的取值如下：
| 取值 | 效果说明 |
|---|---|
| none | 无边框，边框宽度会被计算为0 |
| solid | 实线边框，最常用的边框样式 |
| dashed | 虚线边框，由间断的线段组成 |
| dotted | 点线边框，由一系列圆点组成 |
| double | 双线边框，两条单线之间有固定间距 |
| groove | 3D凹槽边框，效果取决于边框颜色 |
| ridge | 3D垄状边框，效果和groove相反 |
| inset | 3D内嵌边框，效果取决于边框颜色 |
| outset | 3D外嵌边框，效果和inset相反 |
具体实现代码示例
1. 实线边框实现
设置实线边框只需要将border-style设为solid，同时可以配合border-width和border-color定义边框的粗细和颜色，代码如下：
/* 为div元素设置红色、2px宽的实线边框 */
.solid-border {
width: 200px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: #ff0000;
/* 也可以简写为 border: 2px solid #ff0000; */
}
2. 虚线边框实现
虚线边框通过dashed取值实现，同样可以自定义边框的粗细和颜色，代码如下：
/* 为div元素设置蓝色、1px宽的虚线边框 */
.dashed-border {
width: 200px;
height: 100px;
border-style: dashed;
border-width: 1px;
border-color: #0000ff;
/* 简写形式 border: 1px dashed #0000ff; */
}
3. 点线边框实现
点线边框使用dotted取值，实现方式和其他样式类似，代码如下：
/* 为div元素设置绿色、3px宽的点线边框 */
.dotted-border {
width: 200px;
height: 100px;
border-style: dotted;
border-width: 3px;
border-color: #00ff00;
/* 简写形式 border: 3px dotted #00ff00; */
}
4. 不同边设置不同样式
如果需要为元素的四条边框设置不同的样式，可以传入多个border-style取值，代码如下：
/* 上边框实线、左右边框虚线、下边框点线 */
.multi-border {
width: 200px;
height: 100px;
border-style: solid dashed dotted dashed;
border-width: 2px;
border-color: #333333;
}
注意事项
使用border-style属性时需要注意，如果元素没有设置border-width，默认宽度为medium，也就是大概3px左右；如果没有设置border-color，默认会使用元素的color属性值作为边框颜色。另外，border-style的取值为none时，无论设置多大的border-width，边框都不会显示，这一点和border-width设为0的效果一致。
在实际开发中，通常会使用border简写属性一次性设置边框的宽度、样式和颜色，这样可以减少代码量，提升开发效率。例如border: 1px solid #cccccc;就同时设置了1px宽、实线、灰色边框，是开发中最常用的边框设置方式。
CSSborder-style边框样式虚线边框实线边框修改时间：2026-07-02 10:03:16