Borders

Example

The basics

The first box has only the base class applied. The second has the modifier "full" which gives it a round apperance. The last one has the modifier "none" which remove border radius from all sides.

Side specific

Here we've only applied border radius to the sides.

More examples

Here we have a few more usage cases. The first box has the border base class and then removed the border on the top. The second box has a thicker border on the right and the last box has border applied on the left side and in the bottom.

Classes

Format: u-border__side--width

This utlitiy is responsive and can be used like class="u-border__side--width@md"

Modifiers	Description	Values
side	Specify specific side	top. left, right, bottom
width	Sets the width of elements borders	0, 1, 2

Border colors

Example

Colors

Border colors can be applied. Here they are:

Classes

Format: u-border__color--name

Modifiers	Description	Values
name	Sets the color of elements borders	primary, secondary, success, danger, info, warning