About the Border Radius Generator
From a subtle card radius to a fully organic blob, adjust each corner separately, link them for uniform rounding, and copy the border-radius shorthand with slash syntax for elliptical corners.
How to use it
- 1Adjust the cornersUse the sliders for each corner, or link all four to edit them together.
- 2Preview the shapeSwitch between a card, a button and a square to see how the radius behaves at different sizes.
- 3Copy the CSSThe output uses the four-value shorthand and includes the elliptical form when corners differ.
Why use this border radius generator?
- Nothing leaves your device. The work happens in your browser tab. There is no upload endpoint in this app, so your files and text cannot be stored, logged or seen by us.
- No upload wait. You skip the round trip to a server entirely. Results are limited by your own CPU, not by network speed or queue size.
- Free, no account, no quotas. No sign-up wall, no watermark, no daily limit. Optional accounts only exist to save favourites and presets across devices.
Frequently asked questions
Is my design safe to use here?
Yes. This tool runs entirely in your browser using JavaScript. Nothing you paste or open is sent to a server, and the page keeps no copy after you close it.
Do I need to create an account?
No. Every tool is fully usable without signing in. An account only adds saved favourites and reusable presets.
Does it work on a phone?
Yes. The interface is mobile-first with large touch targets and a stacked layout, so it works on phones and tablets as well as desktops.
What does the slash in border-radius mean?
It separates horizontal and vertical radii. For example, 50% / 30% creates an ellipse rather than a circle, which is how asymmetric blob shapes are made.
How do I make a perfect circle?
Set the element's width and height equal, then apply border-radius: 50%. A pill shape instead uses a radius equal to half the element's height.