Borders

Utility classes for borders.

Borders

Borders can be applied directionally to all sides, a specific side, horizontally, or vertically. The table below lists the class names, directions, and the CSS output.

Classes

Class Direction Output
.d-border All border: 1px solid currentColor;
.d-border-top Top border-top: 1px solid currentColor;
.d-border-right Right border-right: 1px solid currentColor;
.d-border-bottom Bottom border-bottom: 1px solid currentColor;
.d-border-left Left border-left: 1px solid currentColor;
.d-border-y Y-Axis border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
.d-border-x X-Axis border-right: 1px solid currentColor;
border-left: 1px solid currentColor;

Examples

.d-border
.d-border-top
.d-border-right
.d-border-bottom
.d-border-left
.d-border-y
.d-border-x
<div class="d-border"></div>
<div class="d-border-top"></div>
<div class="d-border-right"></div>
<div class="d-border-bottom"></div>
<div class="d-border-left"></div>
<div class="d-border-y"></div>
<div class="d-border-x"></div>

Widths

By default all .d-border{-direction} classes have a 1px border width. This can be changed using a .d-border-width{#} utility class. Like the directional border classes above, border widths can be applied to all sides, a specific side, horizontally, or vertically. The table below lists the class names, directions, and the CSS output.

Classes

Class Direction Output
.d-border-width0 All border-width: 0px;
.d-border-width1 All border-width: 1px;
.d-border-width2 All border-width: 2px;
.d-border-width4 All border-width: 4px;
.d-border-width6 All border-width: 6px;
.d-border-top-width0 Top border-top-width: 0px;
.d-border-top-width1 Top border-top-width: 1px;
.d-border-top-width2 Top border-top-width: 2px;
.d-border-top-width4 Top border-top-width: 4px;
.d-border-top-width6 Top border-top-width: 6px;
.d-border-right-width0 Right border-right-width: 0px;
.d-border-right-width1 Right border-right-width: 1px;
.d-border-right-width2 Right border-right-width: 2px;
.d-border-right-width4 Right border-right-width: 4px;
.d-border-right-width6 Right border-right-width: 6px;
.d-border-bottom-width0 Bottom border-bottom-width: 0px;
.d-border-bottom-width1 Bottom border-bottom-width: 1px;
.d-border-bottom-width2 Bottom border-bottom-width: 2px;
.d-border-bottom-width4 Bottom border-bottom-width: 4px;
.d-border-bottom-width6 Bottom border-bottom-width: 6px;
.d-border-left-width0 Left border-left-width: 0px;
.d-border-left-width1 Left border-left-width: 1px;
.d-border-left-width2 Left border-left-width: 2px;
.d-border-left-width4 Left border-left-width: 4px;
.d-border-left-width6 Left border-left-width: 6px;
.d-border-y-width0 Y-Axis border-top-width: 0px;
border-bottom-width: 0px;
.d-border-y-width1 Y-Axis border-top-width: 1px;
border-bottom-width: 1px;
.d-border-y-width2 Y-Axis border-top-width: 2px;
border-bottom-width: 2px;
.d-border-y-width4 Y-Axis border-top-width: 4px;
border-bottom-width: 4px;
.d-border-y-width6 Y-Axis border-top-width: 6px;
border-bottom-width: 6px;
.d-border-x-width0 X-Axis border-right-width: 0px;
border-left-width: 0px;
.d-border-x-width1 X-Axis border-right-width: 1px;
border-left-width: 1px;
.d-border-x-width2 X-Axis border-right-width: 2px;
border-left-width: 2px;
.d-border-x-width4 X-Axis border-right-width: 4px;
border-left-width: 4px;
.d-border-x-width6 X-Axis border-right-width: 6px;
border-left-width: 6px;

Examples

width2
width2 top-width0
top-width2
right-width2
bottom-width4
left-width4
x-width6
y-width6
<div class="d-border d-border-width2">width2</div>
<div class="d-border d-border-width2 d-border-top-width0">width2 top-width0</div>
<div class="d-border-top d-border-top-width2">top-width2</div>
<div class="d-border-right d-border-right-width2">right-width2</div>
<div class="d-border-bottom d-border-bottom-width4">bottom-width4</div>
<div class="d-border-left d-border-left-width4">left-width4</div>
<div class="d-border-x d-border-x-width6">x-width6</div>
<div class="d-border-y d-border-y-width6">y-width6</div>