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;

Usage

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

.br1

.br2

.br-100

.br-pill

Customization

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

Variants

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.