100% offline
CSS
Free · no signup
Updated
Border Radius Generator
A Border Radius Generator lets you round each corner of a box independently — in pixels or percent — with a live preview and copy-ready border-radius CSS, all in your browser.
24px
border-radius: 24px;About Border Radius Generator
Set a single radius for all corners or expand to control each corner on its own, switch between px and % units, and watch the preview update live. Percentage radii produce the organic 'blob' shapes you can't get by eye. The output is a clean border-radius declaration you can paste anywhere. Nothing is uploaded.
What Border Radius Generator does
- Round all corners together or each corner independently
- Switch between px and % units
- Percentage mode for organic blob shapes
- Live preview that matches the output
- Copy-ready border-radius declaration
- Runs entirely in your browser — nothing uploaded
When to reach for Border Radius Generator
- Rounding card and button corners to a consistent radius
- Creating a circular avatar with 50%
- Designing an asymmetric 'squircle' or blob shape
- Matching a corner radius from a design spec
How to use Border Radius Generator
- 01
Choose uniform or per-corner
Set one radius for all corners, or expand to control each corner.
- 02
Pick a unit
Toggle between pixels and percent — percent gives organic shapes.
- 03
Copy the CSS
The border-radius value updates live — copy it with one click.
When to use Border Radius Generator vs alternatives
| Alternative | Use Border Radius Generator when… | Use the alternative when… |
|---|---|---|
| Writing border-radius by hand | you want to preview asymmetric or percentage corners live. | you just need a single uniform radius. |
| fancy-border-radius.netlify.app | you want a px/% toggle plus other CSS tools in one place. | you want their specific 8-value blob handle UI. |
Frequently asked questions
What does a percentage border-radius do?
A percentage radius is relative to the element's dimensions, so 50% on a square makes a circle and uneven percentages make organic 'blob' shapes. Pixel radii are fixed regardless of element size.
How do I round just one corner?
Switch to per-corner mode and set the corner you want; leave the others at 0. The generator writes the four-value border-radius shorthand for you.
Is the output cross-browser?
Yes — border-radius is supported in every modern browser with no prefix needed. The generated CSS works as-is.