Border radius

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.

Corner specific

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

More examples

Let's say you want to create a chat bubble. First we make the whole box rounded. To complete the look we can remove the border radius of one of the corners.

Classes

Format: .u-border-radius__side--radius

This utlitiy is responsive and can be used like class=".u-border-radius__side--radius@md"

Modifiers Description Values
side The sides to add radius to left, right, top, bottom, top__left, bottom__left, top__right, bottom__right, none, full
radius The amount of radius 0, 4, 8, 16