CSS Border Radius Generator
Round corners visually — drag the handles or the per-corner sliders, px or %, live preview and copy-paste CSS. Free, no upload, in your browser.
Drag the dots on the preview to shape each corner.
border-radius: 16px;🔒 Generated in your browser — nothing is uploaded.
Round corners visually
Drag the dots on the preview or a slider for each corner (or link them to move together), switch between
px and %, and resize the preview to the size you will actually use. The preview is painted
with the very declaration printed below it, so what you see is what you paste, and it collapses 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. A percentage resolves against the width for a corner's horizontal radius and against
the height for its vertical one, which is why each corner has two dots rather than one.
Border and background
Add a border — width, style and colour — and the background to the generated CSS when you want the whole shape rather than the corners alone. The preview also takes a solid colour, a two-colour gradient or an image from your own machine; the image is read in your browser only, so it never becomes part of the copied CSS.
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.
Can I shape the corners by dragging?
Yes. Each corner has two dots on the preview, one on each of its edges, and dragging one sets that radius. With "Elliptical corners" off, either dot of a corner moves both of its radii.
Can the border and background go into the CSS?
Yes. Tick "Include border in the CSS" or "Include background in the CSS" and those declarations are printed under border-radius. A preview image you picked is never included, because it never leaves your browser.
Is anything uploaded?
No. The CSS is generated in your browser from your slider values, and a preview image is read locally and never sent anywhere.