Border Style

Controls the style of the borders of an element.

Class	Properties
b-none	border-style: none;
b-d	border-style: dashed;
b-h	border-style: hidden;
b-s	border-style: solid;

<div class="d-g g-16 gtc-4">
  <button class="b-2 b-none bc-cyan bg-white dim-16 fw-700 ins tc-cyan">None</button>
  <button class="b-2 b-d bc-cyan bg-white dim-16 fw-700 ins tc-cyan">Dashed</button>
  <button class="b-2 b-h bc-cyan bg-white dim-16 fw-700 ins tc-cyan">Hidden</button>
  <button class="b-2 b-s bc-cyan bg-white dim-16 fw-700 ins tc-cyan">Solid</button>
</div>

---

Using breakpoints

Using responsive breakpoints like sm:b-*, md:b-*, lg:b-*, and xxl:b-* allows targeting specific utilities in different viewports.

<div class="b-h md:b-s ..."></div>

Using variants

Using :hover variants such as h:b-* allows you to override elements and change their values when hovering over them.

<div class="b-h h:b-s ..."></div>