Border Radius Generator
Generate per-corner CSS border-radius with a live preview.
Quick answer: Border Radius Generator: generate per-corner CSS border-radius with a live preview. Runs entirely in your browser, free, no signup.
Last updated
Good to know
Rounded corners feel simple until you need each corner different, and that is exactly what per-corner control unlocks. Matching modest radii on all four corners gives the friendly, neutral look of most buttons and cards; deliberately mismatched radii produce the soft, organic "blob" shapes that have become a common decorative element behind hero sections and avatars.
One thing worth knowing is the difference between pixel and percentage radii. Pixels give a fixed corner regardless of element size, while a percentage scales with the box — a 50% radius on a square produces a perfect circle, which is the standard trick for round avatar frames. The generator emits pixels in the UI, but swapping px for % in the output is a one-character change.
Because border-radius is an animatable property, adding a CSS transition on it lets a shape morph smoothly between two states on hover. Pair the result with the Box Shadow Generator for depth or the Gradient Generator for a fill, and you have the building blocks of a modern card in a couple of copy-pastes.
Frequently asked questions
- Is it free?
- Yes — free with no signup.
- Can I make blob shapes?
- Yes — give each corner a very different radius for an organic blob.
- What units are supported?
- Pixels in the UI; replace px with % in the output for a percentage-based radius if you prefer.
- Are my settings uploaded?
- No — the preview runs entirely in your browser.
- Does it animate?
- Apply a CSS transition on the border-radius property in your stylesheet to animate between two values.