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.


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



Border colors can be applied. Here they are:


Format: u-border__color--name

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