Dialtone

Border Widths

Utilities for controlling an element's border width.

Classes

ClassOutput
.d-baw0border-width: var(--su0) !important;
.d-baw1border-width: var(--su1) !important;
.d-baw2border-width: var(--su2) !important;
.d-baw4border-width: var(--su4) !important;
.d-baw6border-width: var(--su6) !important;
.d-btw0border-top-width: var(--su0) !important;
.d-btw1border-top-width: var(--su1) !important;
.d-btw2border-top-width: var(--su2) !important;
.d-btw4border-top-width: var(--su4) !important;
.d-btw6border-top-width: var(--su6) !important;
.d-brw0border-right-width: var(--su0) !important;
.d-brw1border-right-width: var(--su1) !important;
.d-brw2border-right-width: var(--su2) !important;
.d-brw4border-right-width: var(--su4) !important;
.d-brw6border-right-width: var(--su6) !important;
.d-bbw0border-bottom-width: var(--su0) !important;
.d-bbw1border-bottom-width: var(--su1) !important;
.d-bbw2border-bottom-width: var(--su2) !important;
.d-bbw4border-bottom-width: var(--su4) !important;
.d-bbw6border-bottom-width: var(--su6) !important;
.d-blw0border-left-width: var(--su0) !important;
.d-blw1border-left-width: var(--su1) !important;
.d-blw2border-left-width: var(--su2) !important;
.d-blw4border-left-width: var(--su4) !important;
.d-blw6border-left-width: var(--su6) !important;

All Sides

Use d-baw{n} to change the border width on your element.


<div class="d-ba d-baw0">...</div>
<div class="d-ba d-baw1">...</div>
<div class="d-ba d-baw2">...</div>
<div class="d-ba d-baw4">...</div>
<div class="d-ba d-baw6">...</div>

Individual Sides

Use d-b{a|t|r|b|l}w{n} to change the border width of your direction on your element.


<div class="d-bt d-btw1">...</div>
<div class="d-br d-brw2">...</div>
<div class="d-bb d-bbw4">...</div>
<div class="d-bl d-blw6">...</div>
Last Updated: