CSS Border Radius Generator
Design rounded corners visually and copy the generated CSS border-radius declaration. Free and private, right in your browser.
Drag corner handles or type values to shape a box's rounded corners and get a copy-ready CSS border-radius value, useful for anything from a subtle 4px card to a fully organic blob shape, with a live preview so you can see exactly what each corner does.
How to use it
- Drag each corner handle or enter a value to set its radius
- Switch between px and % units, or link/unlink corners as needed
- Copy the generated border-radius CSS and paste it into your stylesheet
Frequently asked questions
- How do I get different radius values on each corner?
- Use the individual corner controls (top-left, top-right, bottom-right, bottom-left) instead of the linked slider. The generator switches to the four-value border-radius shorthand automatically and updates the preview live.
- Can I use percentages instead of pixels?
- Yes, toggle the unit to % if you want the radius to scale with the element's size (handy for circles/blobs on responsive elements). Pixel values are more predictable for fixed-size buttons and cards.
- Why does my shape look like a blob instead of rounded corners?
- That happens when you set elliptical radii (different horizontal/vertical values per corner). The tool supports the full border-radius syntax including the slash notation for organic, blob-like shapes.
- 1
Nothing is uploaded
The file never leaves your device. There is no server to send it to, so there is nothing to leak, log, or subpoena.
- 2
No signup, no limits
No account, no email, no daily cap, no watermark, and no paid tier waiting behind the third file.
- 3
Works offline
Load the page once and it keeps working with the network off, because all the work was always happening locally.