What does Border Radius Generator actually do?

The border-radius generator sets each corner and copies the CSS. A single value is the shorthand. Eight values are the elliptical form. It does not clip a box-shadow to the radius by itself — the element’s overflow and the shadow are separate.

When should I use Border Radius Generator?

Use it for an uneven corner radius you do not want to hand-write.

When should I not use Border Radius Generator?

Do not assume the shadow generator uses the same radius.

What does Border Radius Generator not do?

Preview is a rectangle, not your component. Percent radii depend on the element’s width and height.

Border Radius Generator

Visually build CSS border-radius. Per-corner control, 8 presets (Pill, Blob, Leaf, Ticket, Wave). Free online — runs locally, no upload.

Presets

Unit

Top-Left

Top-Right

Bottom-Right

Bottom-Left

CSS Output

border-radius: 16px;

Search tools

Border Radius Generator