All Sides #
Use d-ba to add a border to all sides of your element.
<div class="d-p-200 d-ba d-bgc-primary d-baw0">d-baw0</div> <div class="d-p-200 d-ba d-bgc-primary d-baw1">d-baw1</div> <div class="d-p-200 d-ba d-bgc-primary d-baw2">d-baw2</div> <div class="d-p-200 d-ba d-bgc-primary d-baw4">d-baw4</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-p-200 d-baw4 d-bgc-primary d-bt">d-bt</div> <div class="d-p-200 d-baw4 d-bgc-primary d-br">d-br</div> <div class="d-p-200 d-baw4 d-bgc-primary d-bb">d-bb</div> <div class="d-p-200 d-baw4 d-bgc-primary d-bl">d-bl</div> <div class="d-p-200 d-baw4 d-bgc-primary d-bx">d-bx</div> <div class="d-p-200 d-baw4 d-bgc-primary d-by">d-by</div> <div class="d-p-200 d-baw4 d-bgc-primary d-ba">d-ba</div>
Classes #
Class
|
Output
|
|---|---|
| .d-ba | border: var(--dt-size-border-100) solid !important; |
| .d-bt | border-block-start: var(--dt-size-border-100) solid !important; |
| .d-br | border-inline-end: var(--dt-size-border-100) solid !important; |
| .d-bb | border-block-end: var(--dt-size-border-100) solid !important; |
| .d-bl | border-inline-start: var(--dt-size-border-100) solid !important; |
| .d-bx |
border-inline-end: var(--dt-size-border-100) solid !important; border-inline-start: var(--dt-size-border-100) solid !important; |
| .d-by |
border-block-start: var(--dt-size-border-100) solid !important; border-block-end: var(--dt-size-border-100) solid !important; |