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-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bas-dashed">d-bas-dashed</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bts-dashed">d-bts-dashed</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-brs-dashed">d-brs-dashed</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bbs-dashed">d-bbs-dashed</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bls-dashed">d-bls-dashed</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-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bas-dotted">d-bas-dotted</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bts-dotted">d-bts-dotted</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-brs-dotted">d-brs-dotted</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bbs-dotted">d-bbs-dotted</div> <div class="d-p-200 d-ba d-baw2 d-bgc-primary d-ws-nowrap d-bls-dotted">d-bls-dotted</div>
Classes #
Class
|
Output
|
|---|---|
| .d-bas-unset | border-style: unset !important; |
| .d-bas-dashed | border-style: dashed !important; |
| .d-bts-dashed | border-block-start-style: dashed !important; |
| .d-brs-dashed | border-inline-end-style: dashed !important; |
| .d-bbs-dashed | border-block-end-style: dashed !important; |
| .d-bls-dashed | border-inline-start-style: dashed !important; |
| .d-bas-dotted | border-style: dotted !important; |
| .d-bts-dotted | border-block-start-style: dotted !important; |
| .d-brs-dotted | border-inline-end-style: dotted !important; |
| .d-bbs-dotted | border-block-end-style: dotted !important; |
| .d-bls-dotted | border-inline-start-style: dotted !important; |