Skip to content

Conditional Radius

Border Size

link Border Size
OxyProps CSS Variables
  --o-border-size-1: 1px;
  --o-border-size-2: 2px;
  --o-border-size-3: 5px;
  --o-border-size-4: 10px;
  --o-border-size-5: 25px;

Size 1

link Size 1
o-border-1
CSS Variable
  var(--o-border-size-1)
Utility Class (all sides)
  o-border-1
Utility Class (top)
  o-border-top-1
Utility Class (bottom)
  o-border-bottom-1
Utility Class (left)
  o-border-left-1
Utility Class (right)
  o-border-right-1

Size 2

link Size 2
o-border-2
CSS Variable
  var(--o-border-size-2)
Utility Class (all sides)
  o-border-2
Utility Class (top)
  o-border-top-2
Utility Class (bottom)
  o-border-bottom-2
Utility Class (left)
  o-border-left-2
Utility Class (right)
  o-border-right-2

Size 3

link Size 3
o-border-3
CSS Variable
  var(--o-border-size-3)
Utility Class (all sides)
  o-border-3
Utility Class (top)
  o-border-top-3
Utility Class (bottom)
  o-border-bottom-3
Utility Class (left)
  o-border-left-3
Utility Class (right)
  o-border-right-3

Size 4

link Size 4
o-border-4
CSS Variable
  var(--o-border-size-4)
Utility Class (all sides)
  o-border-4
Utility Class (top)
  o-border-top-4
Utility Class (bottom)
  o-border-bottom-4
Utility Class (left)
  o-border-left-4
Utility Class (right)
  o-border-right-4

Size 5

link Size 5
o-border-5
CSS Variable
  var(--o-border-size-5)
Utility Class (all sides)
  o-border-5
Utility Class (top)
  o-border-top-5
Utility Class (bottom)
  o-border-bottom-5
Utility Class (left)
  o-border-left-5
Utility Class (right)
  o-border-right-5

Border Radius

link 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

Blobs

link Blobs
OxyProps CSS Variables
  --o-radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%;
  --o-radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
  --o-radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
  --o-radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%;
  --o-radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%;

Blob 1

link Blob 1
o-blob-1
CSS Variable
  var(--o-radius-blob-1)
Utility Class
  o-blob-1

Blob 2

link Blob 2
o-blob-2
CSS Variable
  var(--o-radius-blob-2)
Utility Class
  o-blob-2

Blob 3

link Blob 3
o-blob-3
CSS Variable
  var(--o-radius-blob-3)
Utility Class
  o-blob-3

Blob 4

link Blob 4
o-blob-4
CSS Variable
  var(--o-radius-blob-4)
Utility Class
  o-blob-4

Blob 5

link Blob 5
o-blob-5
CSS Variable
  var(--o-radius-blob-5)
Utility Class
  o-blob-5

Conditional Radius

link Conditional Radius

Conditional radius sets a radius, and when we have a component that doesn’t have margin or is taking the full viewport width, it flips the border-radius to 0.

Read the full story by Ahmad Shadeed

The Props

link The Props

Pattern: —o-radius-conditional--5

  --o-radius-conditional-1
  --o-radius-conditional-2
  --o-radius-conditional-3
  --o-radius-conditional-4
  --o-radius-conditional-5
  --o-radius-conditional-6

The Classes

link The Classes

Pattern: o-radius-{ side | corner }-conditional-{ 1-6 | round }

  /* Applies to all corners */


  o-radius-conditional-1
  o-radius-conditional-2
  o-radius-conditional-3
  o-radius-conditional-4
  o-radius-conditional-5
  o-radius-conditional-6


  /* Applies to the 2 corners on the given side */


  o-radius-top-conditional-1
  o-radius-top-conditional-2
  o-radius-top-conditional-3
  o-radius-top-conditional-4
  o-radius-top-conditional-5
  o-radius-top-conditional-6


  o-radius-bottom-conditional-1
  o-radius-bottom-conditional-2
  o-radius-bottom-conditional-3
  o-radius-bottom-conditional-4
  o-radius-bottom-conditional-5
  o-radius-bottom-conditional-6


  o-radius-left-conditional-1
  o-radius-left-conditional-2
  o-radius-left-conditional-3
  o-radius-left-conditional-4
  o-radius-left-conditional-5
  o-radius-left-conditional-6


  o-radius-right-conditional-1
  o-radius-right-conditional-2
  o-radius-right-conditional-3
  o-radius-right-conditional-4
  o-radius-right-conditional-5
  o-radius-right-conditional-6


  /* Applies to an individual corner */


  o-radius-top-left-conditional-1
  o-radius-top-left-conditional-2
  o-radius-top-left-conditional-3
  o-radius-top-left-conditional-4
  o-radius-top-left-conditional-5
  o-radius-top-left-conditional-6


  o-radius-top-right-conditional-1
  o-radius-top-right-conditional-2
  o-radius-top-right-conditional-3
  o-radius-top-right-conditional-4
  o-radius-top-right-conditional-5
  o-radius-top-right-conditional-6


  o-radius-bottom-left-conditional-1
  o-radius-bottom-left-conditional-2
  o-radius-bottom-left-conditional-3
  o-radius-bottom-left-conditional-4
  o-radius-bottom-left-conditional-5
  o-radius-bottom-left-conditional-6


  o-radius-bottom-right-conditional-1
  o-radius-bottom-right-conditional-2
  o-radius-bottom-right-conditional-3
  o-radius-bottom-right-conditional-4
  o-radius-bottom-right-conditional-5
  o-radius-bottom-right-conditional-6

Preview

link Preview
1
2
3
4
5
6