Border Radius Generator

Create complex border radius shapes and blob designs with 8-value syntax. Perfect for unique UI elements.

Quick Presets

Horizontal Radii (Width)

Top Left: 50%

Top Right: 50%

Bottom Right: 50%

Bottom Left: 50%

Vertical Radii (Height)

Top Left: 50%

Top Right: 50%

Bottom Right: 50%

Bottom Left: 50%

Live Preview

CSS Code

.element {
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

Border Radius Value

50% 50% 50% 50% / 50% 50% 50% 50%

8-Value Border Radius Syntax

Syntax: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4

Horizontal values (before /): Control the width of each corner's curve

Vertical values (after /): Control the height of each corner's curve

Order: Top-left, top-right, bottom-right, bottom-left (clockwise)

💡 Tip: Use different horizontal and vertical values to create organic, blob-like shapes!