Skip to content

Border Width

Controls the width of the borders of an element.

Class Properties

b-0

border-width: 0px;

b-1

border-width: 1px;

b-2

border-width: 2px;

b-3

border-width: 4px;

b-4

border-width: 6px;

b-5

border-width: 8px;

b-6

border-width: 10px;

b-7

border-width: 12px;

b-8

border-width: 14px;
<div class="d-g g-16 gtc-4">
<button class="b-1 bc-cyan bg-white dim-16 fw-700 ins tc-cyan">1px</button>
<button class="b-2 bc-cyan bg-white dim-16 fw-700 ins tc-cyan">2px</button>
<button class="b-3 bc-cyan bg-white dim-16 fw-700 ins tc-cyan">4px</button>
<button class="b-4 bc-cyan bg-white dim-16 fw-700 ins tc-cyan">6px</button>
</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: 4px;

bb-4

border-bottom-width: 6px;

bb-5

border-bottom-width: 8px;

bb-6

border-bottom-width: 10px;

bb-7

border-bottom-width: 12px;

bb-8

border-bottom-width: 14px;
<button class="bb-3 bc-cyan bg-white dim-16 fw-700 ins tc-cyan">4px</button>

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: 4px;

bl-4

border-left-width: 6px;

bl-5

border-left-width: 8px;

bl-6

border-left-width: 10px;

bl-7

border-left-width: 12px;

bl-8

border-left-width: 14px;
<button class="bc-cyan bg-white bl-3 dim-16 fw-700 ins tc-cyan">4px</button>

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: 4px;

br-4

border-right-width: 6px;

br-5

border-right-width: 8px;

br-6

border-right-width: 10px;

br-7

border-right-width: 12px;

br-8

border-right-width: 14px;
<button class="bc-cyan bg-white br-3 dim-16 fw-700 ins tc-cyan">4px</button>

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: 4px;

bt-4

border-top-width: 6px;

bt-5

border-top-width: 8px;

bt-6

border-top-width: 10px;

bt-7

border-top-width: 12px;

bt-8

border-top-width: 14px;
<button class="bc-cyan bg-white bt-3 dim-16 fw-700 ins tc-cyan">4px</button>

Using breakpoints

Using 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>

Using variants

Using :hover variants such as h:b-* allows you to override elements and change their values when hovering over them.

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