Rounded Corners in CSS: A Border Radius Guide
Border radius is the CSS property most people use at about a tenth of its capability. One number, all four corners, done. But it takes four values, and the shapes you can only get that way are often exactly what a design needs. The Border Radius Generator makes them visible rather than imagined.
One value or four
A single value rounds every corner equally - fine for buttons and most cards. Four values set the corners individually, going clockwise from the top left, and that is what gives you a tab with only its top corners rounded, a chat bubble with one square corner where the tail attaches, or a panel that rounds only where it does not meet another element.
A percentage behaves differently again. 50% on a square turns it into a circle, which is how round avatars are usually done.
Choosing a radius that fits
The radius should scale with the element. A 4px radius on a small button looks crisp; the same 4px on a large card looks almost square, which reads as an oversight rather than a decision. Big surfaces want 12 to 20px to feel deliberately rounded.
Keep the values consistent across an interface. Two or three sizes - small for inputs and buttons, medium for cards, large for modals - is enough, and picking from a short list is what stops a page looking assembled from unrelated parts.
Nested corners need adjusting
When a rounded element sits inside another, the inner radius should be the outer radius minus the gap between them. Give both the same value and the inner corner looks visibly wrong against the outer curve, even though most people cannot say why.
How to build one
Open the tool, adjust each corner while watching the preview, and copy the CSS.
Rounded elements usually carry a shadow too, and the two should match in weight - the Box Shadow Generator handles that side.
The pill and the circle
Two shapes are worth knowing as idioms rather than numbers. Setting a radius far larger than the element is tall - 999px is the usual lazy value - produces a perfect pill, whatever the width. That is how tags, filter chips and rounded buttons are normally made, and it saves recalculating when the content changes length.
A radius of 50 percent on a square element gives a circle, which is how avatars and icon buttons are done. On a non-square element the same value gives an ellipse, which is almost never wanted - so if your circles look like eggs, the element is not square.
Both are more robust than hard-coding a number, because they keep working when the element resizes.
Common questions
Why does my radius look clipped on an image?
The image needs overflow hidden on its container, or the radius applied to the image itself.
Can the corners be elliptical rather than round?
Yes - a slash in the value sets horizontal and vertical radii separately, giving a softer, more organic curve.
Does border radius affect the clickable area?
Slightly - the corners outside the curve stop being part of the element. Rarely noticeable except on very large radii.
Can I animate a change in radius?
Yes. Transitions between radius values are smooth and are often used for buttons that morph on hover.
Ready to shape some corners?