Border Style

Utilities for controlling an element's border style.

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-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bas-dashed">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bts-dashed">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-brs-dashed">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bbs-dashed">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap 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-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bas-dotted">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bts-dotted">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-brs-dotted">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap d-bbs-dotted">...</div>
<div class="d-p16 d-baw2 d-bc-bold d-bgc-primary d-ws-nowrap 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-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;
Border Style documentation last updated Thursday, June 11, 2026