CSS Border Radius Generator
Round corners visually — per-corner sliders, px or %, live preview and copy-paste CSS. Free, no upload, in your browser.
border-radius: 16px;🔒 Generated in your browser — nothing is uploaded.
Round corners visually
Drag a slider for each corner (or link them to move together), switch between px and %,
and watch the preview update live. The border-radius declaration is generated ready to copy into your
stylesheet, collapsing to shorthand when all corners match.
px vs %
Pixel radii stay fixed; percentage radii scale with the element's size, so 50% turns a square into a
circle and an oval otherwise.
Frequently asked questions
How do I make a circle?
Set the unit to % and all corners to 50% on a square element — it becomes a perfect circle.
Can I set each corner separately?
Yes. Turn off "Link all corners" to control top-left, top-right, bottom-right and bottom-left independently.
Is anything uploaded?
No. The CSS is generated in your browser from your slider values.