Start with one shared radius for a consistent component language.
Local CSS border-radius generator
Shape CSS corners with live preview
Adjust each corner independently, see the result on a card, and copy a clean border-radius declaration.
* Everything runs in your browser. No shape data is uploaded.
CSS ready
border-radius: 16px 40px 16px 40px;Live preview
QUICK GUIDE
Make rounded corners deliberate
Use independent corners when a card needs a directional shape or asymmetrical emphasis.
Keep radii within the component dimensions so curves do not collapse into unexpected shapes.
Paste the shorthand into the element and use overflow: hidden when its children must follow the curve.
FAQ
Border-radius questions
What order does border-radius use?
Four values apply clockwise: top-left, top-right, bottom-right, then bottom-left.
Can I make a circle?
Yes. Set a radius at least half the element's width and height, or use border-radius: 50% for a responsive circle.
Does RadiusBox support percentages?
It currently generates predictable pixel values. Use percentages manually when the element size is fluid.