Border Radius Generator

Drag sliders for each corner and copy clean border-radius CSS.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Border Radius Generator

Follow these steps — everything happens instantly in your browser.

  1. 1

    Step 1. Choose to keep corners linked (uniform) or unlink for per-corner control.

  2. 2

    Step 2. Drag each corner slider or type a precise number in the input.

  3. 3

    Step 3. Switch the unit between px, % and rem.

  4. 4

    Step 4. Apply a quick preset (Sharp / Soft / Round / Pill) or copy the CSS.

Why use this tool

Private by design

All processing happens locally in your browser. Open DevTools → Network and you'll see zero file uploads. Ever.

Instant

No upload wait, no queue, no server round-trip. Results appear the moment you drop a file.

Free & unlimited

No accounts, no watermarks, no daily caps. Use it as many times as you like, forever.

Works everywhere

Desktop, tablet or phone — every tool is responsive and installable as a PWA for offline use.

Frequently asked questions

Everything you might want to know about border radius generator.

Want to learn more?

Read our complete Border Radius Generator tutorial with tips, use cases, and FAQs.