2.1 Box - Border Borders
.border
all sides
.border-none
no border
.border-t
top
.border-b
bottom
.border-l
left
.border-r
right
2.1.1 Box - Border - Colors Border colors
.border-default - uses the text color
.border-transparent - transparent
.border-pink - pink
.border-charcoal - charcoal
.border-frost - frost
.border-fog - fog
.border-moonstone - moonstone
.border-snow - snow
.border-red - red
.border-orange - orange
.border-yellow - yellow
.border-green - green
.border-blue - blue
.border-white - white
2.1.2 Box - Border - Radius Border radius
.radius-0 - none
.radius - 0.5rem all radius
.radius-s - 0.25rem all radius
.radius-l - 0.5rem left radius
.radius-r - 0.5rem right radius
.radius-t - 0.5rem top radius
.radius-b - 0.5rem bottom radius
.radius-l-0 - 0 left radius
.radius-r-0 - 0 right radius
.radius-t-0 - 0 top radius
.radius-b-0 - 0 bottom radius
.radius-l-s - 0.25rem left radius
.radius-r-s - 0.25rem right radius
.radius-t-s - 0.25rem top radius
.radius-b-s - 0.25rem bottom radius
.pill-l - 99999rem left radius
.pill-r - 99999rem right radius
.pill - 99999rem all radius
.circle - Same as .pill
2.1.3 Box - Border - Sizing Border sizing
.border-thin
thin
.border-thick
thick
.border-t-thick
top
.border-b-thick
bottom
.border-l-thick
left
.border-r-thick
right
.border-t-0
remove top border
.border-b-0
remove bottom border
.border-l-0
remove left border
.border-r-0
remove right border
2.2 Box - Invisible Invisible
Use .invisible for visibility: hidden;
Example
.shadow
<div class="shadow short">
<code>.shadow</code>
</div>