Borders

Border

To adjust borders on elements, use the following classes: .border-xs, .border-t-xs, .border-m-xs, .border-l-xs, .border-r-xs. Use dark, mid, light modifiers to change the color of the border.

Sides

t = top
b = bottom
l = left
r = right

Normal

.border-xs

.border-t-xs

.border-b-xs

.border-l-xs

.border-r-xs

Dark

.border-dark-xs

.border-t-dark-xs

.border-b-dark-xs

.border-l-dark-xs

.border-r-dark-xs

Mid

.border-mid-xs

.border-t-mid-xs

.border-b-mid-xs

.border-l-mid-xs

.border-r-mid-xs

Light

.border-light-xs

.border-t-light-xs

.border-b-light-xs

.border-l-light-xs

.border-r-light-xs

<div class="border-xs inline-xs p-05-xs m-r-1-xs">.border-xs</div>
<div class="border-t-xs inline-xs p-05-xs m-r-1-xs">.border-t-xs</div>
<div class="border-b-xs inline-xs p-05-xs m-r-1-xs">.border-b-xs</div>
<div class="border-l-xs inline-xs p-05-xs m-r-1-xs">.border-l-xs</div>
<div class="border-r-xs inline-xs p-05-xs m-r-1-xs">.border-r-xs</div>

Removing Borders

To get a little more control over borders at different breakpoints, we've included a .border-none-xs utility classes. These can be applied to all borders or to specific sides.

.border-none-xs

.border-none-t-xs

.border-none-r-xs

.border-none-b-xs

.border-none-l-xs

<div class="border-dark-xs border-none-xs inline-xs p-05-xs m-r-1-xs">.border-none-xs</div>
<div class="border-dark-xs border-none-t-xs inline-xs p-05-xs m-r-1-xs">.border-t-xs</div>
<div class="border-dark-xs border-none-r-xs inline-xs p-05-xs m-r-1-xs">.border-r-xs</div>
<div class="border-dark-xs border-none-b-xs inline-xs p-05-xs m-r-1-xs">.border-b-xs</div>
<div class="border-dark-xs border-none-l-xs inline-xs p-05-xs">.border-l-xs</div>

Rounded Borders

Its never been easier to add border radius to different corners of an elements. Using .round, .round-t, .round-b, .round-l, .round-r will apply border radius to elements.

.round

.round-t

.round-b

.round-l

.round-r

<div class="border-dark-xs round inline-xs p-05-xs m-r-1-xs">.round</div>
<div class="border-dark-xs round-t inline-xs p-05-xs m-r-1-xs">.round-t</div>
<div class="border-dark-xs round-b inline-xs p-05-xs m-r-1-xs">.round-b</div>
<div class="border-dark-xs round-l inline-xs p-05-xs m-r-1-xs">.round-l</div>
<div class="border-dark-xs round-r inline-xs p-05-xs">.round-r</div>

Circle

To turn an element into a circle, use the .circle class.

<div class="border-dark-xs circle" style="width: 100px; height: 100px;"></div>