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: 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-3"> <div class="ai-c b-1 b-s bc-indigo bg-white d-f dim-16 jc-c tc-indigo">1</div> <div class="ai-c b-2 b-s bc-indigo bg-white d-f dim-16 jc-c tc-indigo">2</div> <div class="ai-c b-3 b-s bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</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 b-s 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 b-s 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 b-s 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 b-s bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3</div>Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
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>
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>