Toolgeist › Design

CSS Border Radius Generator — Live Preview, Per-Corner Control

Adjust border radius per corner independently with a live preview — including elliptical (non-uniform horizontal/vertical) curves for effects like an organic blob shape — then copy the exact generated border-radius CSS shorthand.

How to use Border Radius Gen

1. Adjust each corner's radius with sliders.
2. Watch the live preview update.
3. Toggle elliptical mode for non-uniform curves.
4. Copy the generated CSS.

Frequently asked questions

Can each corner have a different radius?

Yes — the four corners are independently adjustable, generating the correct border-radius shorthand or longhand CSS for asymmetric shapes.

What is elliptical border-radius?

Setting different horizontal and vertical radius values per corner, using the CSS border-radius slash syntax — this is what produces organic, non-circular blob shapes rather than simple rounded corners.

Does the generated CSS work in all modern browsers?

Yes — border-radius, including the elliptical slash syntax, has broad support across all current major browsers.

Related Design tools

• Box Model
• Gradient Border
• CSS Clamp
• Mesh Gradient
• Edge Detection
• Watermark Tool

Also searched for: css border radius generator visual · elliptical border radius css · rounded corner generator online

Browse all 738 free tools on Toolgeist →