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>