Border Directions
Utilities for controlling an element's border.
Classes
| Class | Output |
|---|---|
| .d-ba | border-all: var(--su1) solid currentColor !important; |
| .d-bt | border-top: var(--su1) solid currentColor !important; |
| .d-br | border-right: var(--su1) solid currentColor !important; |
| .d-bb | border-bottom: var(--su1) solid currentColor !important; |
| .d-bl | border-left: var(--su1) solid currentColor !important; |
| .d-bx | border-right: var(--su1) solid currentColor !important; border-left: var(--su1) solid currentColor !important; |
| .d-by | border-top: var(--su1) solid currentColor !important; border-bottom: var(--su1) solid currentColor !important; |
All sides
Use d-ba to add a border to all sides of your element.
<div class="d-ba d-bc-pink-400 d-baw0">...</div>
<div class="d-ba d-bc-pink-400 d-baw1">...</div>
<div class="d-ba d-bc-pink-400 d-baw2">...</div>
<div class="d-ba d-bc-pink-400 d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-baw6">...</div>
Individual sides
Use d-b{t|r|b|l|x|y} to add a border to only specific sides of your element.
<div class="d-bt d-bc-purple-400 d-baw2 ">...</div>
<div class="d-br d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bb d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bl d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bx d-bc-purple-400 d-baw2 ">...</div>
<div class="d-by d-bc-purple-400 d-baw2 ">...</div>
<div class="d-ba d-bc-purple-400 d-baw2 d-btw0 ">...</div>