Dialtone

Border Directions

Utilities for controlling an element's border.

Classes

ClassOutput
.d-ba border-all: var(--su1) solid currentColor !important;
.d-bt border-top: var(--su1) solid currentColor !important;
.d-br border-right: var(--su1) solid currentColor !important;
.d-bb border-bottom: var(--su1) solid currentColor !important;
.d-bl border-left: var(--su1) solid currentColor !important;
.d-bx border-right: var(--su1) solid currentColor !important;
border-left: var(--su1) solid currentColor !important;
.d-by border-top: var(--su1) solid currentColor !important;
border-bottom: var(--su1) solid currentColor !important;

All sides

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

<div class="d-ba d-bc-pink-400 d-baw0">...</div>
<div class="d-ba d-bc-pink-400 d-baw1">...</div>
<div class="d-ba d-bc-pink-400 d-baw2">...</div>
<div class="d-ba d-bc-pink-400 d-baw4">...</div>
<div class="d-ba d-bc-pink-400 d-baw6">...</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-bt d-bc-purple-400 d-baw2 ">...</div>
<div class="d-br d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bb d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bl d-bc-purple-400 d-baw2 ">...</div>
<div class="d-bx d-bc-purple-400 d-baw2 ">...</div>
<div class="d-by d-bc-purple-400 d-baw2 ">...</div>
<div class="d-ba d-bc-purple-400 d-baw2 d-btw0 ">...</div>
Last Updated: