Border Directions

Utilities for controlling an element's border.

All Sides

Use d-ba to add a border to all sides of your element.

<div class="d-p16 d-ba d-baw0 d-bc-default d-bgc-primary">d-baw0</div>
<div class="d-p16 d-ba d-baw1 d-bc-default d-bgc-primary">d-baw1</div>
<div class="d-p16 d-ba d-baw2 d-bc-default d-bgc-primary">d-baw2</div>
<div class="d-p16 d-ba d-baw4 d-bc-default d-bgc-primary">d-baw4</div>

Individual Sides

Use d-b{t|r|b|l|x|y} to add a border to only specific sides of your element.

<div class="d-p16 d-bt d-baw4 d-bc-default d-bgc-primary">d-bt</div>
<div class="d-p16 d-br d-baw4 d-bc-default d-bgc-primary">d-br</div>
<div class="d-p16 d-bb d-baw4 d-bc-default d-bgc-primary">d-bb</div>
<div class="d-p16 d-bl d-baw4 d-bc-default d-bgc-primary">d-bl</div>
<div class="d-p16 d-bx d-baw4 d-bc-default d-bgc-primary">d-bx</div>
<div class="d-p16 d-by d-baw4 d-bc-default d-bgc-primary">d-by</div>
<div class="d-p16 d-ba d-baw4 d-bc-default d-bgc-primary">d-ba</div>

Classes

Class
Output
.d-ba border: var(--dt-space-100) solid !important;
.d-bt border-top: var(--dt-space-100) solid !important;
.d-br border-right: var(--dt-space-100) solid !important;
.d-bb border-bottom: var(--dt-space-100) solid !important;
.d-bl border-left: var(--dt-space-100) solid !important;
.d-bx border-right: var(--dt-space-100) solid !important;
border-left: var(--dt-space-100) solid !important;
.d-by border-top: var(--dt-space-100) solid !important;
border-bottom: var(--dt-space-100) solid !important;
Border Directions documentation last updated Thursday, June 11, 2026