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
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
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
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
Circles
Create a circle out of an element with the same width and height using the .circle class.