Free tool · design
CSS Border-Radius Generator
Design custom rounded corners for each side and copy the CSS.
Adjust each of the four corners independently with sliders to create custom rounded-corner shapes, from simple rounded buttons to organic blob-like cards. Copy the generated border-radius CSS directly.
- Nothing leaves your device
- Runs entirely in your browser
- Free, no account needed
How to use CSS Border-Radius Generator
Three steps, and nothing to install.
Adjust each corner
Set all four independently, or keep them equal for a uniform shape.
Watch the live preview
The shape updates as you drag.
Copy the CSS
Take the generated border-radius declaration into your stylesheet.
More free tools
Free, private, and no sign-up on any of them.
CSS Box-Shadow Generator
Design a custom box-shadow visually and copy the CSS.
Open ToolCSS Gradient Generator
Build a linear, radial or conic gradient with any number of colors and copy the CSS or Tailwind class.
Open ToolCSS clamp() Calculator
Generate a fluid CSS clamp() value for responsive font sizes.
Open ToolHow this works in your browser
The generated declaration sets each of the four corners independently, using the shorthand ordering CSS defines: top-left, top-right, bottom-right, then bottom-left, clockwise from the top left. Setting corners independently is what allows asymmetric and organic shapes rather than only uniform rounding. Browsers clamp a radius that would exceed half the element's dimension, which is why pushing a value past that point produces a pill or circle rather than a broken shape. The preview renders the real property, so the copied CSS behaves identically. Everything runs in your browser.
CSS Border-Radius Generator vs. typical online calculators
| Feature | CSS Border-Radius Generator (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses CSS Border-Radius Generator
Buttons and form controls
Set consistent corner rounding across interactive elements.
Cards and containers
Find a radius that suits the scale of your layout.
Pills, badges and avatars
Create fully rounded shapes for tags and profile images.
Organic and blob shapes
Combine unequal corners for softer decorative forms.
Frequently asked questions
What it can and cannot do, and what happens to your files.
Can each corner have a different radius?
Yes, all four corners can be set independently.
What is the maximum radius?
Up to 100px per corner in this tool.
Does this generate percentage values?
This version generates pixel values.
How much rounding should I use?
Small values read as considered and large ones as playful, and consistency matters more than the specific number. Around 4 to 8 pixels suits buttons and inputs, 8 to 16 suits cards. Picking two or three values and using them everywhere is what makes an interface feel deliberate rather than assembled.
How do I make a perfect circle or pill?
A pill shape comes from setting the radius to at least half the element's height, and anything beyond that is clamped so it cannot overshoot. A circle needs equal width and height with a radius of half that dimension. Both are common enough that it is worth knowing the rule rather than dragging until it looks right.
Why do nested rounded corners look wrong?
Because an inner element needs a smaller radius than its container to look concentric, not the same one. The correct inner radius is the outer radius minus the padding between them. Using an identical radius on both makes the inner corner look too round, which is a subtle but persistent source of visual awkwardness.
Should I use pixels or percentages?
Pixels for consistent corners across elements of different sizes, which is what most interfaces want. Percentages scale with the element, which is how you get elliptical and organic blob shapes, since each corner's radius then depends on the element's dimensions.
Design rounded corners visually - free.
Files never leave your device. No upload, no account, and free for unlimited use.