How does the shorthand output work?

The tool automatically collapses your four corner values into the shortest valid border-radius shorthand. Equal corners become one value, mirrored pairs become two, and so on, so you always get clean, minimal CSS.

What is the difference between px and % units?

Pixels (px) give a fixed corner radius regardless of element size. Percent (%) scales the radius relative to the element's width and height, which can create ellipse-like or pill shapes on larger boxes.

⬜

CSS Border-Radius Generator

Design rounded corners with a live preview.

Loading tool…

How to use the CSS Border-Radius Generator

1Drag the sliders to set each corner's radius, or toggle Linked to adjust all four at once.
2Switch between px and % units and watch the live preview update.
3Click Copy CSS to grab the optimized border-radius shorthand.

About the CSS Border-Radius Generator

Free CSS border-radius generator with sliders for each corner, a live preview, px/% units, and copy-ready shorthand code for rounded corners on any element.

Part of our Color Tools collection. Browse all tools.

Frequently asked questions

How does the shorthand output work?: The tool automatically collapses your four corner values into the shortest valid border-radius shorthand. Equal corners become one value, mirrored pairs become two, and so on, so you always get clean, minimal CSS.
What is the difference between px and % units?: Pixels (px) give a fixed corner radius regardless of element size. Percent (%) scales the radius relative to the element's width and height, which can create ellipse-like or pill shapes on larger boxes.