Live
CSS Shadow Generator
Fine-tune box-shadows visually and copy CSS.
Web dev · Free tool
Border Radius Generator
Drag the four corner sliders and watch every curve update live — then copy clean, standards-valid border-radius CSS with one click.
Shape the corners
Live preview
How corners work
Radius, the quick way
Four independent corners
Each slider owns one corner. A single radius value sets all four; separate values let you build asymmetric, playful shapes like a squircle corner on a square tile.
px vs %
px keeps curves the same physical size; % scales them to the box — 50% makes a square a circle and a rectangle an ellipse. Toggle units to see the difference instantly.
Copy and ship
The output is a single declaration — drop it straight into your CSS rule. The exact value (with the unit you chose) is already waiting to paste.
Questions
Border radius FAQ
What does the four-value order do?
The values run clockwise from top-left: TL, TR, BR, BL. If you only set one value, every corner gets it; if you set two, TL & BR share the first and TR & BL the second.
Can I make a circle?
Yes. Switch the units to %, move all four sliders to 50, and any square becomes a perfect circle. On a rectangle, 50% produces a rounded-oval (an ellipse).
Why does my % preview look different from px?
Percentages scale with the element's size, so on a 140×140 box they resolve to a real pixel count. px radii do not scale — the curve looks identical regardless of how big the element grows.