Border Conditional Radius
This page lists all Border Conditional Radius CSS custom properties and utility classes available in the OxyProps Framework
Conditional Radius
link Conditional Radius| 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 |
Individual sides
link Individual sidesApplies 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 |
Individual corners
link Individual cornersApplies 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 |