💻 Developer Tools

Border Radius Generator

Adjust each corner with sliders and get the shortest equivalent CSS border-radius shorthand. Your input never leaves your browser.

Examples (click to try)
Mode
Unit

Related tools

▢ Box Shadow GeneratorVisual CSS box-shadow builder 🌈 CSS Gradient GeneratorLinear & radial with live preview 📈 Cubic Bezier Easing GeneratorCraft CSS easing curves visually { } JSON FormatterFormat, minify & validate JSON 🔡 Base64 Encode / DecodeText ⇔ Base64 🔗 URL Encode / DecodePercent-encode URLs #️⃣ Hash GeneratorSHA-1 / 256 / 384 / 512 🆔 UUID GeneratorBulk UUID, ULID & NanoID

How to use

Includes the 8-value blob (organic shape) syntax with a randomizer. The preview updates live and everything stays in your browser.

In Corners mode, four sliders control the top-left, top-right, bottom-right and bottom-left radii. The output is automatically collapsed to the shortest equivalent shorthand — one value when all corners match, two when the diagonals match, and so on. Switch between px and %, and turn on "Link all corners" to move all four with a single slider. Blob (8 values) mode builds the slash-separated syntax with four horizontal and four vertical radii; hit the randomizer to explore organic shapes.

Examples

  • All four corners 12px → border-radius: 12px; (collapsed to one value)
  • Top-left & bottom-right 10px, top-right & bottom-left 20px → border-radius: 10px 20px; (diagonals match, two values)
  • Top corners 24px, bottom corners 0 → border-radius: 24px 24px 0px 0px; (tab-like top rounding)
  • Unit % with all corners 50 → border-radius: 50%; (a perfect circle on a square element)
  • Blob default → border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

FAQ

Is my data sent to a server?
No. Everything runs in your browser; nothing is transmitted or stored externally.
In what order are the four values applied?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. When values are omitted, CSS reuses the diagonal corner's value, and this tool automatically shortens the output to the shortest equivalent form (1 to 4 values).
When should I use px vs %?
px gives a fixed rounding that ignores the element's size — good for cards and buttons. % is relative to the element's width and height, so it scales with the element; 50% on a square element makes a perfect circle.
What is the blob (8-value) mode?
A slash-separated CSS syntax that sets four horizontal and four vertical radii independently. The corners become asymmetric, producing organic blob shapes. The randomize button is a handy way to explore shapes.