Skip to content

Border Radius

This page lists all Border Radius CSS custom properties and utility classes available in the OxyProps Framework

Border Radius

link Border Radius
DescriptionCSS VariableUtility 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

Individual sides

link Individual sides
SizeTopRightBottomLeft
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

Individual corners

link Individual corners
SizeTop leftTop rightBottom rightBottom 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
DescriptionCSS VariableUtility 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

Conditional Radius

link Conditional Radius
DescriptionCSS VariableUtility 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 borders utility classes

link Individual borders utility classes

Applies a conditional radius to the 2 corners of the chosen side.

SizeTopRightBottomLeft
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 utility classes

link Individual corners utility classes

Applies a conditional radius to the chosen corner.

SizeTop leftTop rightBottom rightBottom 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