border style

Utilities for controlling the style of an element's borders.

2025-03-29

Written by: tdtc

ClassStyles
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;

divider style

Basic example

Use utilities like border-solid and border-dotted to control an element’s border style:

<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>

Setting the divider style

Use utilities like divide-dashed and divide-dotted to control the border style between child elements:

<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Removing a border

Use the border-none utility to remove an existing border from an element:

<button class="border-none ...">Save Changes</button>

Ref