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>