Border Radius
The .u-rounded--{radius} modifier applies a border radius to all corners of an element, creating a rounded appearance. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance depending on the element's dimensions. The 'none' value applies no border radius, creating sharp corners. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest.
Radius
Usage
/* Format */
.u-rounded--{radius} {}
/* Examples & modifiers */
.u-rounded--full {}
.u-rounded--none {}
.u-rounded--1 {}
.u-rounded--2 {}
.u-rounded--3 {}
.u-rounded--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded--{radius} modifier applies a border radius to all corners of an element, creating a rounded appearance. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance depending on the element's dimensions. The 'none' value applies no border radius, creating sharp corners. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded--{radius}@{sm, md, lg}).
Preview
Preview
Top Left
Usage
/* Format */
.u-rounded-top-left--{radius} {}
/* Examples & modifiers */
.u-rounded-top-left--full {}
.u-rounded-top-left--none {}
.u-rounded-top-left--1 {}
.u-rounded-top-left--2 {}
.u-rounded-top-left--3 {}
.u-rounded-top-left--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-top-left--{radius} modifier applies a border radius to the top-left corner of an element, creating a rounded appearance on that corner. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that corner depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp corner. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-top-left--{radius}@{sm, md, lg}).
Preview
Preview
Top Right
Usage
/* Format */
.u-rounded-top-right--{radius} {}
/* Examples & modifiers */
.u-rounded-top-right--full {}
.u-rounded-top-right--none {}
.u-rounded-top-right--1 {}
.u-rounded-top-right--2 {}
.u-rounded-top-right--3 {}
.u-rounded-top-right--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-top-right--{radius} modifier applies a border radius to the top-right corner of an element, creating a rounded appearance on that corner. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that corner depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp corner. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-top-right--{radius}@{sm, md, lg}).
Preview
Preview
Bottom Left
Usage
/* Format */
.u-rounded-bottom-left--{radius} {}
/* Examples & modifiers */
.u-rounded-bottom-left--full {}
.u-rounded-bottom-left--none {}
.u-rounded-bottom-left--1 {}
.u-rounded-bottom-left--2 {}
.u-rounded-bottom-left--3 {}
.u-rounded-bottom-left--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-bottom-left--{radius} modifier applies a border radius to the bottom-left corner of an element, creating a rounded appearance on that corner. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that corner depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp corner. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-bottom-left--{radius}@{sm, md, lg}).
Preview
Preview
Bottom Right
Usage
/* Format */
.u-rounded-bottom-right--{radius} {}
/* Examples & modifiers */
.u-rounded-bottom-right--full {}
.u-rounded-bottom-right--none {}
.u-rounded-bottom-right--1 {}
.u-rounded-bottom-right--2 {}
.u-rounded-bottom-right--3 {}
.u-rounded-bottom-right--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-bottom-right--{radius} modifier applies a border radius to the bottom-right corner of an element, creating a rounded appearance on that corner. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that corner depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp corner. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-bottom-right--{radius}@{sm, md, lg}).
Preview
Preview
Left
Usage
/* Format */
.u-rounded-left--{radius} {}
/* Examples & modifiers */
.u-rounded-left--full {}
.u-rounded-left--none {}
.u-rounded-left--1 {}
.u-rounded-left--2 {}
.u-rounded-left--3 {}
.u-rounded-left--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-left--{radius} modifier applies a border radius to the left side of an element, creating a rounded appearance on that side. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that side depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp edge. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-left--{radius}@{sm, md, lg}).
Preview
Preview
Right
Usage
/* Format */
.u-rounded-right--{radius} {}
/* Examples & modifiers */
.u-rounded-right--full {}
.u-rounded-right--none {}
.u-rounded-right--1 {}
.u-rounded-right--2 {}
.u-rounded-right--3 {}
.u-rounded-right--4 {}| Modifier | Values | Description |
|---|---|---|
|
radius
|
full, none, 1, 2, 3, 4 | The .u-rounded-right--{radius} modifier applies a border radius to the right side of an element, creating a rounded appearance on that side. The specific radius applied depends on the value of the {radius} modifier, which can be one of the following: full, none, 1, 2, 3, or 4. The 'full' value applies a fully rounded border radius, creating a pill-shaped or circular appearance on that side depending on the element's dimensions. The 'none' value applies no border radius, creating a sharp edge. The numeric values (1, 2, 3, 4) apply increasing levels of border radius, with '1' being the smallest and '4' being the largest. |
Supports responsive suffix (e.g. .u-rounded-right--{radius}@{sm, md, lg}).
Preview
Preview