Border Radius

Per-corner CSS radii with a preview.

Loading tool

Drag one corner or type four values. The preview box updates as you go.

How to use this tool

Enter the source text. Type the URL, password rules, or other input the generator needs.
Generate. Create the code, image, or snippet in this tab.
Copy or download. Save the SVG, CSS, or text. Refreshing the page starts over.

Each corner can have a different horizontal and vertical radius, matching the eight-value CSS form.

How do I get a pill button?

Set a large radius such as 9999px, or 50% on a short rectangle.

Is this the same as rounding a photo?

This emits CSS. To bake pixels into a PNG, use Rounded Corners.

Can I copy the Tailwind class?

If the values match a default scale, a hint is shown. Odd pixels stay as arbitrary CSS.

Do percentages use width or height?

CSS percent radii resolve against the matching axis of the box.

Will this clip overflow?

Radius alone does not clip children unless overflow is hidden.