Dialtone

Border Style.

Utilities for controlling an element's border style.

Classes

ClassOutput
.d-bas-unsetborder-style: unset !important;
.d-bas-dashedborder-style: dashed !important;
.d-bts-dashedborder-top-style: dashed !important;
.d-brs-dashedborder-right-style: dashed !important;
.d-bbs-dashedborder-bottom-style: dashed !important;
.d-bls-dashedborder-left-style: dashed !important;
.d-bas-dottedborder-style: dotted !important;
.d-bts-dottedborder-top-style: dotted !important;
.d-brs-dottedborder-right-style: dotted !important;
.d-bbs-dottedborder-bottom-style: dotted !important;
.d-bls-dottedborder-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>
Last Updated: