Skip to content

Border Radius

OxyProps CSS Variables
  --o-radius-1: 2px;
  --o-radius-2: 5px;
  --o-radius-3: 1rem;
  --o-radius-4: 2rem;
  --o-radius-5: 4rem;
  --o-radius-6: 8rem;
  --o-radius-round: 1e5px;

No Radius

link No Radius
o-noradius

Use this class to remove the border radius from an element.

Utility Class
  o-noradius

Radius 1

link Radius 1
o-radius-1
CSS Variable
  var(--o-radius-1)
Utility Class (all corners)
  o-radius-1

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-1
Utility Class (top corners)
  o-radius-top-1
Utility Class (bottom corners)
  o-radius-bottom-1
Utility Class (left corners)
  o-radius-left-1
Utility Class (right corners)
  o-radius-right-1

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-1
Utility Class (top left corner)
  o-radius-top-left-1
Utility Class (top right corner)
  o-radius-top-right-1
Utility Class (bottom left corner)
  o-radius-bottom-left-1
Utility Class (bottom right corner)
  o-radius-bottom-right-1

Radius 2

link Radius 2
o-radius-2
CSS Variable
  var(--o-radius-2)
Utility Class (all corners)
  o-radius-2

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-2
Utility Class (top corners)
  o-radius-top-2
Utility Class (bottom corners)
  o-radius-bottom-2
Utility Class (left corners)
  o-radius-left-2
Utility Class (right corners)
  o-radius-right-2

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-2
Utility Class (top left corner)
  o-radius-top-left-2
Utility Class (top right corner)
  o-radius-top-right-2
Utility Class (bottom left corner)
  o-radius-bottom-left-2
Utility Class (bottom right corner)
  o-radius-bottom-right-2

Radius 3

link Radius 3
o-radius-3
CSS Variable
  var(--o-radius-3)
Utility Class (all corners)
  o-radius-3

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-3
Utility Class (top corners)
  o-radius-top-3
Utility Class (bottom corners)
  o-radius-bottom-3
Utility Class (left corners)
  o-radius-left-3
Utility Class (right corners)
  o-radius-right-3

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-3
Utility Class (top left corner)
  o-radius-top-left-3
Utility Class (top right corner)
  o-radius-top-right-3
Utility Class (bottom left corner)
  o-radius-bottom-left-3
Utility Class (bottom right corner)
  o-radius-bottom-right-3

Radius 4

link Radius 4
o-radius-4
CSS Variable
  var(--o-radius-4)
Utility Class (all corners)
  o-radius-4

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-4
Utility Class (top corners)
  o-radius-top-4
Utility Class (bottom corners)
  o-radius-bottom-4
Utility Class (left corners)
  o-radius-left-4
Utility Class (right corners)
  o-radius-right-4

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-4
Utility Class (top left corner)
  o-radius-top-left-4
Utility Class (top right corner)
  o-radius-top-right-4
Utility Class (bottom left corner)
  o-radius-bottom-left-4
Utility Class (bottom right corner)
  o-radius-bottom-right-4

Radius 5

link Radius 5
o-radius-5
CSS Variable
  var(--o-radius-5)
Utility Class (all corners)
  o-radius-5

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-5
Utility Class (top corners)
  o-radius-top-5
Utility Class (bottom corners)
  o-radius-bottom-5
Utility Class (left corners)
  o-radius-left-5
Utility Class (right corners)
  o-radius-right-5

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-5
Utility Class (top left corner)
  o-radius-top-left-5
Utility Class (top right corner)
  o-radius-top-right-5
Utility Class (bottom left corner)
  o-radius-bottom-left-5
Utility Class (bottom right corner)
  o-radius-bottom-right-5

Radius 6

link Radius 6
o-radius-6
CSS Variable
  var(--o-radius-6)
Utility Class (all corners)
  o-radius-6

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-6
Utility Class (top corners)
  o-radius-top-6
Utility Class (bottom corners)
  o-radius-bottom-6
Utility Class (left corners)
  o-radius-left-6
Utility Class (right corners)
  o-radius-right-6

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-6
Utility Class (top left corner)
  o-radius-top-left-6
Utility Class (top right corner)
  o-radius-top-right-6
Utility Class (bottom left corner)
  o-radius-bottom-left-6
Utility Class (bottom right corner)
  o-radius-bottom-right-6

Radius round

link Radius round
o-radius-round
CSS Variable
  var(--o-radius-round)
Utility Class (all corners)
  o-radius-round

Set Radius on Corners of a specific side

link Set Radius on Corners of a specific side
o-radius-left-round
Utility Class (top corners)
  o-radius-top-round
Utility Class (bottom corners)
  o-radius-bottom-round
Utility Class (left corners)
  o-radius-left-round
Utility Class (right corners)
  o-radius-right-round

Set Radius on a specific corner

link Set Radius on a specific corner
o-radius-bottom-right-round
Utility Class (top left corner)
  o-radius-top-left-round
Utility Class (top right corner)
  o-radius-top-right-round
Utility Class (bottom left corner)
  o-radius-bottom-left-round
Utility Class (bottom right corner)
  o-radius-bottom-right-round