Border Width

Class	Properties
b-0	border-width: 0px;
b-1	border-width: 1px;
b-2	border-width: 2px;
b-3	border-width: 3px;
b-4	border-width: 4px;
b-5	border-width: 5px;
b-6	border-width: 6px;
b-7	border-width: 7px;
b-8	border-width: 8px;

This example showcases various border widths: 1px, 2px, 3px, and 4px. The element will have borders that are thin, moderately thick, thick, and very thick, respectively.

<div class="d-g g-16 gtc-1 sm:gtc-4">
  <div class="ai-c b-1 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">1</div>
  <div class="ai-c b-2 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">2</div>
  <div class="ai-c b-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>
  <div class="ai-c b-4 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">4</div>
</div>

Border Bottom Width

Controls the width of the bottom border of an element.

Class	Properties
bb-0	border-bottom-width: 0px;
bb-1	border-bottom-width: 1px;
bb-2	border-bottom-width: 2px;
bb-3	border-bottom-width: 3px;
bb-4	border-bottom-width: 4px;
bb-5	border-bottom-width: 5px;
bb-6	border-bottom-width: 6px;
bb-7	border-bottom-width: 7px;
bb-8	border-bottom-width: 8px;

This example showcases various bottom border widths: 1px, 2px, 3px, and 4px. The element will have bottom borders that are thin, moderately thick, thick, and very thick, respectively.

<div class="ai-c bb-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>

Border Left Width

Controls the width of the left border of an element.

Class	Properties
bl-0	border-left-width: 0px;
bl-1	border-left-width: 1px;
bl-2	border-left-width: 2px;
bl-3	border-left-width: 3px;
bl-4	border-left-width: 4px;
bl-5	border-left-width: 5px;
bl-6	border-left-width: 6px;
bl-7	border-left-width: 7px;
bl-8	border-left-width: 8px;

This example showcases various bottom left widths: 1px, 2px, 3px, and 4px. The element will have left borders that are thin, moderately thick, thick, and very thick, respectively.

<div class="ai-c bl-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>

Border Right Width

Controls the width of the right border of an element.

Class	Properties
br-0	border-right-width: 0px;
br-1	border-right-width: 1px;
br-2	border-right-width: 2px;
br-3	border-right-width: 3px;
br-4	border-right-width: 4px;
br-5	border-right-width: 5px;
br-6	border-right-width: 6px;
br-7	border-right-width: 7px;
br-8	border-right-width: 8px;

This example showcases various right border widths: 1px, 2px, 3px, and 4px. The element will have right borders that are thin, moderately thick, thick, and very thick, respectively.

<div class="ai-c br-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>

Border Top Width

Controls the width of the top border of an element.

Class	Properties
bt-0	border-top-width: 0px;
bt-1	border-top-width: 1px;
bt-2	border-top-width: 2px;
bt-3	border-top-width: 3px;
bt-4	border-top-width: 4px;
bt-5	border-top-width: 5px;
bt-6	border-top-width: 6px;
bt-7	border-top-width: 7px;
bt-8	border-top-width: 8px;

This example showcases various top border widths: 1px, 2px, 3px, and 4px. The element will have top borders that are thin, moderately thick, thick, and very thick, respectively.

<div class="ai-c bt-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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-1 md:b-2 ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

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