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-rounded__side--radius
This utlitiy is responsive and can be used like class=".u-rounded__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, 2, 4, 8, 16, full |