CSS Border Radius Generator

Generate CSS rounded corners visually

The Border Radius Generator makes it easy to round the corners of any element exactly how you want. Round all four corners together, or unlink them to control each corner independently, with a live preview and copy-ready CSS. It removes the guesswork from the border-radius property.

How border-radius works

The CSS border-radius property rounds an element's corners. With a single value, all four corners share the same radius; with four values, they apply to the top-left, top-right, bottom-right, and bottom-left corners in that clockwise order. Larger values create softer, rounder corners — and a radius equal to half the element's size produces a perfect circle or pill shape.

How to use it

1. Keep corners linked to round them all equally, or unlink for independent control.
2. Drag the sliders and watch the live preview update.
3. Copy the generated border-radius CSS.

Common shapes

Goal	Approach
Subtle rounding	4–8px on all corners
Card or modal	12–20px on all corners
Pill button	A very large radius (e.g. 999px)
Circle	50% on a square element
Speech bubble	Round three corners, leave one square

Tips

• Be consistent. Reuse the same radius across components for a cohesive look.
• Match scale. Larger elements usually need a slightly larger radius to look balanced.
• Pill shapes come from a radius bigger than half the height — no need to calculate exactly.
• Asymmetric corners create playful, custom shapes like tags and bubbles.

Why rounded corners matter

Rounded corners feel friendlier and more modern than sharp edges, and they are now standard across web and app design. They soften the visual weight of buttons, cards, inputs, and images, and subtly guide the eye. This generator lets you find the exact radius that fits your design language.

Private and free

Everything runs in your browser with a live preview, no sign-up, and no limits. Generate as many corner styles as you like, free.