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; |
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; |
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; |
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; |
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; |
Using breakpoints
Using responsive breakpoints like sm:b-*
, md:b-*
, lg:b-*
, and xxl:b-*
allows targeting specific utilities in different viewports.
Using variants
Using :hover
variants such as h:b-*
allows you to override elements and change their values when hovering over them.