Border Radius
The .u-rounded utility applies a standard border radius to an element, creating rounded corners.
Radius
Usage
/* Format */
.u-rounded--{full} {}
/* Examples & modifiers */
.u-rounded {}
.u-rounded--full {}| Modifier | Values | Description |
|---|---|---|
|
default
|
The .u-rounded utility applies a standard border radius to an element, creating rounded corners. | |
|
full
|
full | The .u-rounded--full modifier applies a fully rounded border radius to an element, creating a pill-shaped or circular appearance depending on the element's dimensions. This do not apply corner-shape token to allow for a complete rounding effect regardless of the design system's defined corner shapes. |
Supports responsive suffix (e.g. .u-rounded--{full}@{sm, md, lg}).
Preview
Preview