Border Radius Generator
Drag the corner handles to sculpt organic blobs with 8 independent radii — then copy the CSS or Tailwind code.
How to Use the Border Radius Generator
- Drag any of the 4 corner handles directly on the preview box to shape it visually.
- Fine-tune with the sliders: each corner has an independent horizontal and vertical radius.
- Try the presets — blobs, leaf, egg and ticket shapes are one click away.
- Match the demo box and background colors to your real design for an accurate preview.
- Copy the border-radius declaration from the CSS tab, or grab the Tailwind class.
About This Border Radius Generator
Most people know border-radius as a single value — but the property actually accepts up to 8 values: four horizontal radii and four vertical radii, separated by a slash (e.g. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). This slash syntax is the secret behind organic “blob” shapes that are everywhere in modern web design.
This generator exposes all 8 values as sliders and as draggable corner handles, so you can sculpt the exact shape you want without memorizing the syntax. When all corners share equal horizontal and vertical radii, the output automatically simplifies to the standard 1–4 value notation. The generated code works in every modern browser, and the Tailwind tab produces an arbitrary-value rounded-[...] class.
Border Radius FAQ
What is the slash (/) syntax in border-radius?
In border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, the values before the slash are the horizontal radii of the four corners (top-left, top-right, bottom-right, bottom-left) and the values after the slash are their vertical radii. Different horizontal and vertical radii create elliptical corners — the basis of organic blob shapes.
How do I make a perfect circle?
Set all corners to 50% (or click the Circle preset). On a square element, border-radius: 50% produces a perfect circle; on a rectangle it produces an ellipse. Percentages are relative to the element's own width and height.
Should I use percentages or pixels for border-radius?
Percentages scale with the element, making shapes responsive and ideal for blobs. Pixels give a fixed corner size, which is better for UI components like buttons and cards where you want consistent rounding regardless of size. This generator uses percentages so your shapes stay proportional at any size.
Why does my blob look squashed on a wide element?
Percentage radii are relative to the element's dimensions — 50% horizontal on a 400px-wide box is 200px, while 50% vertical on a 200px-tall box is 100px. This is expected behavior: the shape adapts to the box. Preview at the same aspect ratio as your real element for accuracy.
Does the 8-value syntax work in all browsers?
Yes. The slash syntax for elliptical corners is part of the CSS Backgrounds and Borders spec and is supported by all modern browsers (Chrome, Edge, Firefox, Safari) — no prefixes required.