Border Width

Utility	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-width utilities:

• The 1px border width utility creates a thin border.
• The 2px border width utility creates a medium border.
• The 3px border width utility creates a thick border.
• The 4px border width utility creates an extra thick border.

A

B

C

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

Border Bottom Width

Controls the width of the bottom border of an element.

Utility	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 sets the bottom border width to 3px. The element will have a thick bottom border.

A

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

Border Left Width

Controls the width of the left border of an element.

Utility	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 sets the left border width to 3px. The element will have a thick left border.

A

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

Border Right Width

Controls the width of the right border of an element.

Utility	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 sets the right border width to 3px. The element will have a thick right border.

A

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

Border Top Width

Controls the width of the top border of an element.

Utility	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 sets the top border width to 3px. The element will have a thick top border.

A

<div class="ai-c bt-3 bc-indigo d-f d-16 jc-c tc-indigo">A</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-1 md:b-2 ..."></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-1 h:b-2 ..."></div>