Border Width

Utility	Properties
Error: 429

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
Error: 429

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
Error: 429

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
Error: 429

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
Error: 429

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:-*,md:-*, lg:-*, and xxl:-* 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:-* utility to override elements and change their values when hovering over them.

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