Does this produce shorthand?

Yes — the four values map to top-left, top-right, bottom-right, bottom-left in the standard border-radius shorthand order.

CSS Border-Radius Generator

Shape each corner with independent border-radius sliders and a live preview. Copy the CSS — supports % and px units.

By AbraCalc Editorial Team · Reviewed by AbraCalc Methodology Review · Last reviewed: 2026-06-25

Top-L Top-R Bot-R Bot-L

Unit

CSS

Pure browser JavaScript — generates CSS locally.

Embed this tool on your site

<iframe src="https://abracalc.com/app/css-border-radius-generator/" width="100%" height="640" style="border:1px solid #e4e7ec;border-radius:12px" loading="lazy"></iframe>

How to use this tool

Drag the slider for each of the four corners.
Switch between % and px units.
Copy the border-radius CSS shorthand.

Shape each corner with independent border-radius sliders and a live preview. Copy the CSS — supports % and px units.

Frequently asked questions

Does this produce shorthand?: Yes — the four values map to top-left, top-right, bottom-right, bottom-left in the standard border-radius shorthand order.

References & sources

border-radius (MDN)

CSS Border-Radius Generator

How to use this tool

Frequently asked questions

References & sources

Related tools