Border Style

Utility	Properties
b-none	border-style: none;
b-d	border-style: dashed;
b-s	border-style: solid;

This example showcases various border styles: none, dashed, and solid. The element will have no border, a dashed border, and a solid border, respectively.

A

B

C

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="ai-c b-2 b-none bc-indigo d-f d-16 jc-c tc-indigo">A</div>
  <div class="ai-c b-2 b-d bc-indigo d-f d-16 jc-c tc-indigo">B</div>
  <div class="ai-c b-2 b-s bc-indigo d-f d-16 jc-c tc-indigo">C</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine 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>

Hover modifiers

Alternatively, you can apply :hover by using h:b-* utility to override elements and change their values when hovering over them.

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