Border Widths

Utilities for controlling an element's border width.

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>

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-btw2">...</div>
<div class="d-bb d-btw4">...</div>

Class	Output
.d-baw0	border-width: var(--dt-size-border-0) !important;
.d-baw1	border-width: var(--dt-size-border-100) !important;
.d-baw2	border-width: var(--dt-size-border-200) !important;
.d-baw4	border-width: var(--dt-size-border-300) !important;
.d-btw0	border-top-width: var(--dt-size-border-0) !important;
.d-btw1	border-top-width: var(--dt-size-border-100) !important;
.d-btw2	border-top-width: var(--dt-size-border-200) !important;
.d-btw4	border-top-width: var(--dt-size-border-300) !important;
.d-brw0	border-right-width: var(--dt-size-border-0) !important;
.d-brw1	border-right-width: var(--dt-size-border-100) !important;
.d-brw2	border-right-width: var(--dt-size-border-200) !important;
.d-brw4	border-right-width: var(--dt-size-border-300) !important;
.d-bbw0	border-bottom-width: var(--dt-size-border-0) !important;
.d-bbw1	border-bottom-width: var(--dt-size-border-100) !important;
.d-bbw2	border-bottom-width: var(--dt-size-border-200) !important;
.d-bbw4	border-bottom-width: var(--dt-size-border-300) !important;
.d-blw0	border-left-width: var(--dt-size-border-0) !important;
.d-blw1	border-left-width: var(--dt-size-border-100) !important;
.d-blw2	border-left-width: var(--dt-size-border-200) !important;
.d-blw4	border-left-width: var(--dt-size-border-300) !important;