border-style用于设置边框样式,可取solid(实线)、dashed(虚线)、dotted(点线)等值,需配合border-width和border-color使用,且仅当style非none时边框才显示。

在CSS中,border-style 属性用于设置元素边框的样式。你可以通过它来实现实线、虚线、点线等视觉效果。该属性可以分别应用于上、右、下、左四个边框,也可以统一设置。
常用 border-style 取值
以下是 border-style 支持的主要样式值:
- solid:实线边框,最常用
- dashed:虚线边框(短横线)
- dotted:点线边框(由小圆点组成)
- none:无边框(默认)
- hidden:隐藏边框(与 none 类似,但在表格边框合并时有区别)
- 其他如 double、groove、ridge、inset、outset 等,用于特殊立体效果
基本语法与用法
你可以为四个边分别设置样式,也可以统一设置:
/* 四个边统一设置 */
div {
border-style: solid;
}
/ 分别设置四个边 /
div {
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: none;
}
/ 使用简写 border 属性(推荐) /
div {
border: 2px solid #000; / 实线 /
border: 1px dashed red; / 虚线 /
border: 1px dotted blue; / 点线 /
}
实际应用示例
以下是一个包含多种边框样式的HTML元素示例:
立即学习“前端免费学习笔记(深入)”;
实线边框虚线边框点线边框
基本上就这些。通过 border-style 配合 border-width 和 border-color,你可以灵活控制边框的外观。使用简写的 border 属性会更高效。注意:只有当 border-style 不是 none 时,边框才会显示。










