Border Style.
Utilities for controlling an element's border style.
Classes
| Class | Output |
|---|---|
| .d-bas-unset | border-style: unset !important; |
| .d-bas-dashed | border-style: dashed !important; |
| .d-bts-dashed | border-top-style: dashed !important; |
| .d-brs-dashed | border-right-style: dashed !important; |
| .d-bbs-dashed | border-bottom-style: dashed !important; |
| .d-bls-dashed | border-left-style: dashed !important; |
| .d-bas-dotted | border-style: dotted !important; |
| .d-bts-dotted | border-top-style: dotted !important; |
| .d-brs-dotted | border-right-style: dotted !important; |
| .d-bbs-dotted | border-bottom-style: dotted !important; |
| .d-bls-dotted | border-left-style: dotted !important; |
Dashed Borders
Use d-b{a|t|r|b|l}s-dashed to change the border style to dashed on your element.
<div class="d-ba d-bc-pink-400 d-bas-dashed d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-bts-dashed d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-brs-dashed d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-bbs-dashed d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-bls-dashed d-baw4">...</div>
Dotted Borders
Use d-b{a|t|r|b|l}s-dotted to change the border style to dotted on your element.
<div class="d-ba d-bc-purple-400 d-bas-dotted d-baw4">...</div>
<div class="d-ba d-bc-purple-400 d-bts-dotted d-baw4">...</div>
<div class="d-ba d-bc-purple-400 d-brs-dotted d-baw4">...</div>
<div class="d-ba d-bc-purple-400 d-bbs-dotted d-baw4">...</div>
<div class="d-ba d-bc-purple-400 d-bls-dotted d-baw4">...</div>