How 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.
How to use CSS Border-Radius Generator
- 1
Open the Border-Radius Generator
Go to tools.slaytic.com and open the CSS Border-Radius Generator. No sign-up or account required.
- 2
Adjust each corner
Set all four independently, or keep them equal for a uniform shape.
- 3
Watch the live preview
The shape updates as you drag.
- 4
Copy the CSS
Take the generated border-radius declaration into your stylesheet.
Frequently asked questions
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.