This page lists all Border Radius CSS custom properties and utility classes available in the OxyProps Framework
| Description | CSS Variable | Utility Class |
|---|
| Removes border radius. | | o-noradius |
| Creates a subtle radius. | --o-radius-1 | o-radius-1 |
| Creates a small radius. | --o-radius-2 | o-radius-2 |
| Creates a medium radius. | --o-radius-3 | o-radius-3 |
| Creates a large radius. | --o-radius-4 | o-radius-4 |
| Creates a xlarge radius. | --o-radius-5 | o-radius-5 |
| Creates a xxlarge radius. | --o-radius-6 | o-radius-6 |
| Created a round radius | --o-radius-round | o-radius-round |
| Size | Top | Right | Bottom | Left |
|---|
| subtle | o-radius-top-1 | o-radius-right-1 | o-radius-bottom-1 | o-radius-left-1 |
| small | o-radius-top-2 | o-radius-right-2 | o-radius-bottom-2 | o-radius-left-2 |
| medium | o-radius-top-3 | o-radius-right-3 | o-radius-bottom-3 | o-radius-left-3 |
| large | o-radius-top-4 | o-radius-right-4 | o-radius-bottom-4 | o-radius-left-4 |
| xlarge | o-radius-top-5 | o-radius-right-5 | o-radius-bottom-5 | o-radius-left-5 |
| xxlarge | o-radius-top-6 | o-radius-right-6 | o-radius-bottom-6 | o-radius-left-6 |
| round | o-radius-top-round | o-radius-right-round | o-radius-bottom-round | o-radius-left-round |
| Size | Top left | Top right | Bottom right | Bottom left |
|---|
| subtle | o-radius-top-left-1 | o-radius-top-right-1 | o-radius-bottom-right-1 | o-radius-bottom-left-1 |
| small | o-radius-top-left-2 | o-radius-top-right-2 | o-radius-bottom-right-2 | o-radius-bottom-left-2 |
| medium | o-radius-top-left-3 | o-radius-top-right-3 | o-radius-bottom-right-3 | o-radius-bottom-left-3 |
| large | o-radius-top-left-4 | o-radius-top-right-4 | o-radius-bottom-right-4 | o-radius-bottom-left-4 |
| xlarge | o-radius-top-left-5 | o-radius-top-right-5 | o-radius-bottom-right-5 | o-radius-bottom-left-5 |
| xxlarge | o-radius-top-left-6 | o-radius-top-right-6 | o-radius-bottom-right-6 | o-radius-bottom-left-6 |
| round | o-radius-top-left-round | o-radius-top-right-round | o-radius-bottom-right-round | o-radius-bottom-left-round |
| Description | CSS Variable | Utility Class |
|---|
| Creates a blob version 1. | --o-radius-blob-1 | o-blob-1 |
| Creates a blob version 2. | --o-radius-blob-2 | o-blob-2 |
| Creates a blob version 3. | --o-radius-blob-3 | o-blob-3 |
| Creates a blob version 4. | --o-radius-blob-4 | o-blob-4 |
| Creates a blob version 5. | --o-radius-blob-5 | o-blob-5 |
| Description | CSS Variable | Utility Class |
|---|
| Creates a subtle conditional radius. | --o-radius-conditional-1 | o-radius-conditional-1 |
| Creates a small conditional radius. | --o-radius-conditional-2 | o-radius-conditional-2 |
| Creates a medium conditional radius. | --o-radius-conditional-3 | o-radius-conditional-3 |
| Creates a large conditional radius. | --o-radius-conditional-4 | o-radius-conditional-4 |
| Creates a xlarge conditional radius. | --o-radius-conditional-5 | o-radius-conditional-5 |
| Creates a xxlarge conditional radius. | --o-radius-conditional-6 | o-radius-conditional-6 |
Applies a conditional radius to the 2 corners of the chosen side.
| Size | Top | Right | Bottom | Left |
|---|
| subtle | o-radius-top-conditional-1 | o-radius-right-conditional-1 | o-radius-bottom-conditional-1 | o-radius-left-conditional-1 |
| small | o-radius-top-conditional-2 | o-radius-right-conditional-2 | o-radius-bottom-conditional-2 | o-radius-left-conditional-2 |
| medium | o-radius-top-conditional-3 | o-radius-right-conditional-3 | o-radius-bottom-conditional-3 | o-radius-left-conditional-3 |
| large | o-radius-top-conditional-4 | o-radius-right-conditional-4 | o-radius-bottom-conditional-4 | o-radius-left-conditional-4 |
| xlarge | o-radius-top-conditional-5 | o-radius-right-conditional-5 | o-radius-bottom-conditional-5 | o-radius-left-conditional-5 |
| xxlarge | o-radius-top-conditional-6 | o-radius-right-conditional-6 | o-radius-bottom-conditional-6 | o-radius-left-conditional-6 |
Applies a conditional radius to the chosen corner.
| Size | Top left | Top right | Bottom right | Bottom left |
|---|
| subtle | o-radius-top-left-conditional-1 | o-radius-top-right-conditional-1 | o-radius-bottom-right-conditional-1 | o-radius-bottom-left-conditional-1 |
| small | o-radius-top-left-conditional-2 | o-radius-top-right-conditional-2 | o-radius-bottom-right-conditional-2 | o-radius-bottom-left-conditional-2 |
| medium | o-radius-top-left-conditional-3 | o-radius-top-right-conditional-3 | o-radius-bottom-right-conditional-3 | o-radius-bottom-left-conditional-3 |
| large | o-radius-top-left-conditional-4 | o-radius-top-right-conditional-4 | o-radius-bottom-right-conditional-4 | o-radius-bottom-left-conditional-4 |
| xlarge | o-radius-top-left-conditional-5 | o-radius-top-right-conditional-5 | o-radius-bottom-right-conditional-5 | o-radius-bottom-left-conditional-5 |
| xxlarge | o-radius-top-left-conditional-6 | o-radius-top-right-conditional-6 | o-radius-bottom-right-conditional-6 | o-radius-bottom-left-conditional-6 |