border-style 属性定义 css 边框的样式。它可以取多个值，每个值都代表一种不同的边框外观。
理解 border-style 属性的关键在于，它并非单独作用，而是与 border-width (边框宽度) 和 border-color (边框颜色) 属性协同工作，共同构成完整的边框效果。 缺失任何一个属性，边框效果都会大打折扣，甚至完全不可见。 我曾经在项目中就因为遗漏了 border-width 属性而苦苦调试了半天，最终才发现问题所在。
让我们逐一看看 border-style 属性可接受的值，并结合实际例子说明：
-
none: 这是最简单的值，表示没有边框。 这在某些情况下非常有用，例如你想去除元素的默认边框，或者创建一个视觉上的“无缝”连接。 我曾经用它来移除表格单元格的默认边框，从而实现一个更简洁的表格设计。 -
hidden: 与none类似，但它会保留边框所占的空间，即使边框本身不可见。这在某些布局场景中可能会有用，但通常情况下none更为常用。 -
dotted: 创建点状边框。点的大小和间距取决于浏览器和用户设置，所以最好不要依赖于其精确的视觉效果。 -
dashed: 创建虚线边框。和dotted一样，虚线的长度和间距并非完全可控。 -
solid: 创建实线边框。这是最常用的值，它能产生清晰、明确的边框效果。几乎所有需要边框的场合我都会优先选择它。 -
double: 创建双线边框。它由两条平行的实线组成，中间留有一定的空隙。 我曾经用它来突出重要的表单元素，使其更引人注目。 -
groove: 创建凹槽状边框，看起来像是内凹的。效果类似于雕刻出来的凹陷。 -
ridge: 创建凸起状边框，与groove相反，看起来像是凸出来的。 -
inset: 创建内嵌状边框，类似于groove，但更强调内凹感。 -
outset: 创建外凸状边框，类似于ridge，但更强调外凸感。
groove, ridge, inset, outset 这四个值，其外观受浏览器样式表的影响较大，在不同浏览器下可能会有细微差异。 为了确保一致性，在关键的视觉设计中，我通常会避免使用它们，而选择更可靠的 solid 或 double。
记住，border-style 属性的值可以单独应用于元素的顶部、右侧、底部和左侧边框，例如 border-top-style: dotted; border-bottom-style: solid;。 这提供了更精细的边框控制。 灵活运用这些属性，你就能创建出各种各样的边框效果，提升网页设计的视觉效果。
