Border Radius

Utilities for controlling the border radius of an element.

Class Properties
.br-{radius} border-radius: {radius};
.br0 border-radius: 0;
.btr0 border-top-right-radius: 0; border-top-left-radius: 0;
.brr0 border-top-right-radius: 0; border-bottom-right-radius: 0;
.bbr0 border-bottom-right-radius: 0; border-bottom-left-radius: 0;
.blr0 border-top-left-radius: 0; border-bottom-left-radius: 0;


Add a border radius to an element, either as a step (.br1, .br2,) or as a fixed value (.br-100).



All border radiuses are defined in _settings.scss and can be adjusted to your likings. You can also change the radius at specific breakpoints.


By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.