Home / CSS & color / Border Radius Generator
Border Radius Generator
Four sliders, one for each corner, with a live shape to look at. The generated rule collapses to its short form when every corner matches, so you copy the cleanest CSS rather than four repeated values.
How to use it
- Drag each corner slider.
- Watch the preview take shape.
- Copy the rule underneath.
Examples
- All four at 16px → border-radius: 16px.
- Top corners rounded and bottom square makes a tab or a card header.
- One corner at zero and the rest large gives the speech-bubble shape.
Questions people ask
What does a percentage do?
It scales with the element instead of staying fixed, so 50% on a square makes a perfect circle and on a rectangle makes an ellipse. Fixed pixels keep the same visual roundness whatever the element's size.
Why does my radius look wrong on a small element?
Because a radius larger than half the element gets clamped by the browser and neighbouring curves merge. Keep the radius under half of the shortest side, or accept the pill shape that results.
Related tools
Updated: 2026-08-07