⬭ CSS Border-Radius Generator
Generate pixel-perfect CSS border-radius values in seconds — no account, no install, nothing sent to a server. Drag sliders for each corner, hit Blob Randomize for organic shapes, then copy the finished CSS straight into your stylesheet.
Set independent horizontal (x) and vertical (y) radii per corner.
About
This CSS Border-Radius Generator gives you three editing modes in one free, offline-capable tool: Simple mode adjusts all four corners at once, Per-Corner mode lets you fine-tune each corner independently, and Elliptic mode unlocks separate horizontal and vertical radii for each corner — the full power of the CSS border-radius shorthand syntax. A live SVG corner diagram mirrors every change in real time, and the Blob Randomize button uses a cryptographically random algorithm to produce the organic blob shapes popular in modern UI design. Because everything runs in your browser, your designs stay private and the tool works even without an internet connection.
How to use
- Choose a mode — Simple (all corners), Per-Corner, or Elliptic (separate x/y radii) — using the buttons at the top of the controls panel.
- Drag the sliders or type values directly into the number inputs to set the radius for each corner. The live preview and SVG diagram update instantly.
- Click Blob Randomize to generate a random organic blob shape using independent elliptic radii — great for decorative UI elements and hero backgrounds.
- Review the generated CSS shorthand in the output box — the tool automatically applies the shortest valid syntax (e.g., collapses identical values).
- Click Copy CSS to copy the code to your clipboard, then paste it directly into your stylesheet or design tool.
FAQ
- Is this CSS Border-Radius Generator completely free?
- Yes, 100% free with no account, no subscription, and no hidden limits. Open the page and start generating border-radius CSS immediately.
- Does the tool work offline or without an internet connection?
- Yes. The tool runs entirely in your browser with no server calls. Once the page has loaded, you can disconnect from the internet and it will continue to work. Your last settings are also saved locally in your browser.
- Is my design data kept private?
- Completely. No data ever leaves your browser — there is no upload, no analytics on your inputs, and no server storage. Everything stays on your device.
- What does Elliptic mode do?
- Elliptic mode lets you set separate horizontal (x) and vertical (y) radii for each of the four corners, producing the full CSS border-radius shorthand with a slash notation — for example, border-radius: 40% 20% / 20% 40%. This unlocks asymmetric and egg-like shapes that Simple and Per-Corner modes cannot create.
- What is the Blob Randomize button for?
- Blob Randomize uses a cryptographically random algorithm to generate an organic, irregular shape by assigning random elliptic radii to all eight corner-axis combinations. It is ideal for creating the fluid blob shapes common in modern landing pages, avatars, and decorative backgrounds — with a single click.