border-style

用于控制元素边框样式的工具类。

快速参考

类	属性
border-solid	border-style: solid;
border-dashed	border-style: dashed;
border-dotted	border-style: dotted;
border-double	border-style: double;
border-hidden	border-style: hidden;
border-none	border-style: none;
divide-solid	& > :not(:last-child) { border-style: solid; }
divide-dashed	& > :not(:last-child) { border-style: dashed; }
divide-dotted	& > :not(:last-child) { border-style: dotted; }
divide-double	& > :not(:last-child) { border-style: double; }
divide-hidden	& > :not(:last-child) { border-style: hidden; }
divide-none	& > :not(:last-child) { border-style: none; }

示例

基础示例

使用 border-solid 和 border-dotted 等工具类控制元素的边框样式：

border-solid

border-dashed

border-dotted

border-double

<!-- [!code classes:border-solid,border-dashed,border-dotted,border-double] -->
<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>

移除边框

使用 border-none 工具类移除元素上已有的边框：

<!-- [!code classes:border-none] -->
<button class="border-none ...">Save Changes</button>

这通常用于移除在更小断点上应用的边框样式。

设置分隔线样式

使用 divide-dashed 和 divide-dotted 等工具类控制子元素之间的边框样式：

01

02

03

<!-- [!code classes:divide-dashed] -->
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

响应式设计

在 border-style 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：

<div class="border-solid md:border-dotted ...">
 <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。