Borders

Borders in Solid are semi-transparent so they work with nearly any fill they're applied on top of. Use .xs-border, .xs-border-top, .xs-border-right, .xs-border-bottom and .xs-border-left to adjust outlines on elements.

.xs-border

.xs-border-top

.xs-border-right

.xs-border-bottom

.xs-border-left

<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border">.xs-border</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border-top">.xs-border-top</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border-right">.xs-border-right</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border-bottom">.xs-border-bottom</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border-left">.xs-border-left</div>

Lighter Borders

Adding -lighter to the border classes above results in a slightly more transparent border.

.xs-border-lighter

.xs-border-top-lighter

.xs-border-right-lighter

.xs-border-bottom-lighter

.xs-border-left-lighter

<div class="xs-inline-block xs-mb2 xs-mr2 xs-p1 xs-border-lighter">.xs-border-lighter</div>
<div class="xs-inline-block xs-mr xs-mb22 xs-p1 xs-border-top-lighter">.xs-border-top-lighter</div>
<div class="xs-inline-block xs-mr xs-mb22 xs-p1 xs-border-right-lighter">.xs-border-right-lighter</div>
<div class="xs-inline-block xs-mr xs-mb22 xs-p1 xs-border-bottom-lighter">.xs-border-bottom-lighter</div>
<div class="xs-inline-block xs-mr xs-mb22 xs-p1 xs-border-left-lighter">.xs-border-left-lighter</div>

Removing Borders

When a border needs to be removed (at a breakpoint, for instance), use .xs-border-none classes.

.xs-border-none

.xs-border-top-none

.xs-border-right-none

.xs-border-bottom-none

.xs-border-left-none

<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border xs-border-none">.xs-border-none</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border xs-border-top-none">.xs-border-top-none</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border xs-border-right-none">.xs-border-right-none</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border xs-border-bottom-none">.xs-border-bottom-none</div>
<div class="xs-inline-block xs-mr2 xs-mb2 xs-p1 xs-border xs-border-left-none">.xs-border-left-none</div>

Rounded Corners

Round off corners using .rounded, .rounded-top, .rounded-right, .rounded-bottom, and .rounded-left

.rounded

.rounded-top

.rounded-right

.rounded-bottom

.rounded-left

<div class="xs-inline-block xs-border xs-p2 rounded">.rounded</div>
<div class="xs-inline-block xs-border xs-p2 rounded-top">.rounded-top</div>
<div class="xs-inline-block xs-border xs-p2 rounded-right">.rounded-right</div>
<div class="xs-inline-block xs-border xs-p2 rounded-bottom">.rounded-bottom</div>
<div class="xs-inline-block xs-border xs-p2 rounded-left">.rounded-left</div>

Circles

Create a circle out of an element with the same width and height using the .circle class.

<img src="/images/user.png" width="100" height="100" alt="user" class="circle" />