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.
<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>
Adding -lighter
to the border classes above results in a slightly more transparent border.
<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>
When a border needs to be removed (at a breakpoint, for instance), use .xs-border-none
classes.
<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>
Round off corners using .rounded
, .rounded-top
, .rounded-right
, .rounded-bottom
, and .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>
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" />