CSS Border-Radius Generator
Design rounded corners visually — set each corner's radius, watch the live preview, and copy the CSS. Great for cards, buttons, pills and circles. Runs in your browser.
FAQ
How do I round the corners of an element in CSS?
Use the border-radius property — border-radius: 12px rounds all four corners equally. This generator lets you set each corner separately and copies the exact code.
How do I round only one or two corners?
border-radius takes up to four values in the order top-left, top-right, bottom-right, bottom-left. Set the corners you want and leave the others at 0 — the tool writes the shorthand.
How do I make a pill or circle shape?
For a pill, set a very large radius like 999px. For a circle, use border-radius: 50% on a square element. Both are one click here.
What units can I use for border-radius?
Pixels (px) for fixed rounding; percentages (%) round relative to element size, which is how you get circles and ellipses.
More tools: CSS box-shadow generator, CSS gradient generator, and the full tools list.