边框样式属性
最后更新：2026-09-13
border-style 边框样式属性
border-style 用于定义边框的线型外观，如实线、虚线、点线等。它是边框能否显示的关键——即使设置了 border-width 和 border-color，如果 border-style 为 none，边框依然不可见。CSS 提供了 10 种不同的线型供选择。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset{1,4};⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | 关键字 | 10 种边框线型 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： solid（实线）是最常用的样式；dashed（虚线）和 dotted（点线）常用于临时标记或草稿状态。
注意： none 和 hidden 都不显示边框，但 hidden 在表格 border-collapse: collapse 中会抑制相邻边框，行为不同。
❓ 常见问题
Qgroove、ridge、inset、outset 为什么看起来没立体感？
A这四种 3D 线型依赖边框颜色的明暗对比来塑造立体感，当颜色对比较低或边框宽度较小时，效果几乎看不出来。现代扁平化 UI 设计中已经很少使用，更推荐 solid 配合 box-shadow 实现柔和的层次效果。
Qborder-style: none 和 hidden 有什么区别？
A两者都不绘制边框，主要区别体现在表格中：当 border-collapse: collapse 时，hidden 会强制抑制与其相邻的边框（优先级最高），而 none 优先级较低，相邻单元格设置的边框仍可能显示。在普通元素上两者效果完全一致。
QCSS 有哪些边框线型？分别适合什么场景？
ACSS 共提供 10 种线型：none、hidden、solid、dashed、dotted、double、groove、ridge、inset、outset。solid 实线最常用；dashed 虚线、dotted 点线适合分隔线；double 双线适合强调；groove 等 4 种 3D 线型在扁平化设计中已少用。
Q如何实现四条边不同或单边虚线的混合线型？
Aborder-style 支持 1~4 个值按上右下左分配，如 border-style: solid dashed; 即上下实线、左右虚线。也可组合单边属性：border-top-style: dashed; border-bottom-style: solid;，实现仅一侧虚线的效果。
🏷️ 相关属性
💡 相关案例
📚 相关教程
