CSS border-radius generator

How it works

Serialize circular corner radii clockwise from top left as a four-value border-radius declaration.

Input definitions

Top-left radius (px): Enter the value in the labeled unit.
Top-right radius (px): Enter the value in the labeled unit.
Bottom-right radius (px): Enter the value in the labeled unit.
Bottom-left radius (px): Enter the value in the labeled unit.

A worked example

Top-left radius (px): 8
Top-right radius (px): 16
Bottom-right radius (px): 8
Bottom-left radius (px): 16

border-radius: 8px 16px 8px 16px;

Assumptions & limits

Circular radii in CSS pixels, no elliptical slash syntax. Browsers scale overlapping radii to fit the box.

Sources & review

Maintained by AnsRio. Methods and examples use automated checks; this does not imply independent professional certification.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius ↗

Method updated 2026-10-17. Content checked against the stated method and examples. Our verification approach.

Common questions

Which corner comes first in the four-value syntax?

The order is top left, top right, bottom right, bottom left. If adjacent radii cannot fit the element, the browser proportionally scales them down.

Does generated CSS or a color result guarantee an accessible design?

No. Test the result in its real layout, including text contrast, browser zoom, focus and responsive behavior. A code generator only covers its documented property or color operation.

How does the CSS border-radius generator tool work?

Serialize circular corner radii clockwise from top left as a four-value border-radius declaration.

What are the assumptions and limits of CSS border-radius generator?

Circular radii in CSS pixels, no elliptical slash syntax. Browsers scale overlapping radii to fit the box.