Round every corner, on purpose.
Link all four corners for a uniform radius, or unlock them to sculpt an asymmetric shape.
Radius CSS is generated in the browser. Nothing is uploaded.
What it does
About the Border Radius Generator.
A border-radius generator lets you set linked or independent corners, optionally with Figma-style smoothing, then copy the CSS for the shape.
Cards, inputs, and squircle-like icons all need a radius that matches the rest of the system. Unlocking corners is how you get a ticket stub or a chat bubble without drawing a custom path.
How to use
Three steps.
Set
Link all four corners for a uniform radius, or unlock them to set each corner.
Read
Add smoothing if you want a squircle-like curve closer to Figma’s corner smoothing.
Copy
Copy the CSS (and related path tricks when smoothing is on) into your project.
When to use it
Where it helps.
Use it when a design file shows mixed radii, or when engineering asks for the exact four-value border-radius shorthand. Check the radius at the real component size, because a 24px round on a 32px chip looks like a pill.
FAQ
FAQ.
Can I set each corner separately?
Yes. Unlock the corners and set top-left, top-right, bottom-right, and bottom-left independently. The CSS shorthand follows that order.
What is corner smoothing?
Figma’s corner smoothing eases the curve toward a squircle instead of a simple circular arc. This tool approximates that look so CSS can get closer to the mockup.
How do I copy the CSS?
Copy the border-radius declaration (and any extra output the tool shows for smoothing) and paste it onto the element or token.
Is anything uploaded?
No. The shape is computed locally in your browser.