border-style用于设置元素边框样式，可选值包括solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、none（无边框）和hidden（隐藏边框），可统一设置或单独控制四边，常与border-width和border-color配合使用，或通过简写属性border定义，如border: 2px dashed #f00表示2像素宽的红色虚线边框，若未设置宽度或颜色可能导致边框不可见。
在CSS中，border-style 属性用于控制元素边框的样式。通过设置不同的值，可以实现虚线、实线、点线等效果。这个属性可以分别应用于上、右、下、左四个边框，也可以统一设置。
常见 border-style 可选值
以下是常用的 border-style 取值及其效果：
- solid：实线边框
- dashed：虚线边框（短横线）
- dotted：点线边框（由小圆点组成）
- double：双线边框
- none：无边框（默认）
- hidden：隐藏边框
基本语法与用法
你可以为四个边框统一设置样式，也可以单独控制某一边：
/* 四个边框都为实线 */ border-style: solid;/ 上边实线，右边虚线，下边点线，左边无 / border-style: solid dashed dotted none;
/ 单独设置某一边 / border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid; border-left-style: double;
结合宽度和颜色完整定义边框
border-style 通常与 border-width 和 border-color 一起使用，或者直接使用简写属性 border：
立即学习“前端免费学习笔记（深入）”；
div {
border: 2px dashed #f00; /* 2像素宽的红色虚线边框 */
}
如果只设置了 style 而没有设置 width 或 color，浏览器可能无法显示边框（因为默认宽度为0或颜色不可见）。
实用示例
下面是一个展示不同样式的HTML元素示例：
.box {
width: 200px;
height: 50px;
margin: 10px 0;
}
.solid { border: 2px solid #000; }
.dashed { border: 2px dashed #00f; }
.dotted { border: 2px dotted #090; }
基本上就这些。只要掌握 border-style 的取值和组合方式，就能灵活控制边框的视觉表现。
