Border Style

Controls the style of the borders of an element.

Class	Property
b-none	border-style: none;
b-d	border-style: dashed;
b-s	border-style: solid;

None

Dashed

Solid

<div class="d-g g-16 gtc-3">
  <div
    class="ai-c b-2 b-none bc-indigo bg-white d-f dim-16 fw-700 jc-c tc-indigo">
    None
  </div>
  <div class="ai-c b-2 b-d bc-indigo bg-white d-f dim-16 fw-700 jc-c tc-indigo">
    Dashed
  </div>
  <div class="ai-c b-2 b-s bc-indigo bg-white d-f dim-16 fw-700 jc-c tc-indigo">
    Solid
  </div>
</div>

---

Using responsive modifiers

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

Using :hover modifiers 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>