Border Style

Utility	Properties
Failed to load data. Please try again later.

This example showcases various border-style utilities:

• The dashed utility creates a border with dashed lines.
• The none utility removes the border entirely.
• The solid utility creates a continuous border line.

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 modifier

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 modifier

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>