Free · no signup · browser-local

CSS Border Radius Generator for Asymmetric Corners

Adjust horizontal and vertical radii for each corner in pixels or percentages. Preview the shape and copy the CSS border-radius declaration.

Corner settings

LOCAL

Unit

Top left · horizontal

Top left · vertical

Top right · horizontal

Top right · vertical

Bottom right · horizontal

Bottom right · vertical

Bottom left · horizontal

Bottom left · vertical

Preview color

border-radius: 28px 42px 20px 12px / 16px 30px 42px 24px;

Choose px or %, adjust four horizontal and four vertical radii, then copy the resulting CSS.

Browsers may proportionally scale overlapping radii on small elements; test against your actual component size.

Set top-left to 30 px horizontally and 10 px vertically for an asymmetric card.

The slash syntax of CSS border-radius keeps horizontal and vertical corner values independent.

Tune eight horizontal and vertical corner radii with a live shape preview.

How do I use CSS Border Radius Generator?

Choose px or %, adjust four horizontal and four vertical radii, then copy the resulting CSS.

Does this tool upload my data?

Inputs and files are processed in your browser. Page-view analytics do not contain your tool input.

What should I check before using the result?

Browsers may proportionally scale overlapping radii on small elements; test against your actual component size.