Border Width

Controls the width of the borders of an element.

Class	Style
`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.

<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 Top Width

Controls the width of the top border of an element.

Class	Style
`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 border-width-top utilities:

The 1px border top width utility creates a thin border.
The 2px border top width utility creates a medium border.
The 3px border top width utility creates a thick border.

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

Border Right Width

Controls the width of the right border of an element.

Class	Style
`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 border-width-right utilities:

The 1px border right width utility creates a thin border.
The 2px border right width utility creates a medium border.
The 3px border right width utility creates a thick border.

  <div class="d-g g-16 gtc-1 sm:gtc-3">
    <div class="ai-c br-1 bc-indigo b-s d-f d-16 jc-c tc-indigo">A</div>
    <div class="ai-c br-2 bc-indigo b-s d-f d-16 jc-c tc-indigo">B</div>
    <div class="ai-c br-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.

Class	Style
`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 border-width-bottom utilities:

The 1px border bottom width utility creates a thin border.
The 2px border bottom width utility creates a medium border.
The 3px border bottom width utility creates a thick border.

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

Border Left Width

Controls the width of the left border of an element.

Class	Style
`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 border-width-left utilities:

The 1px border left width utility creates a thin border.
The 2px border left width utility creates a medium border.
The 3px border left width utility creates a thick border.

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

Using utility variants

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

Using media queries

You can combine responsive breakpoints like sm:b-*, md:b-*, lg:b-*, and xxl:b-* to allow targeting specific utilities in different viewports.

Using hover states

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