CSS Border Radius Generator

Control every corner of an element's border-radius independently — link all four corners for a uniform rounded box, or unlink them for an asymmetric shape. Set values in px or %, preview live, then copy the CSS or Tailwind classes. Looking for a fully organic, wavy blob shape instead of rounded corners? Try the CSS blob generator.

How to use the CSS Border Radius Generator

Link or unlink the corners. Link all four corners together, or unlink them to set each independently.
Adjust each corner. Drag each corner's slider to set its radius.
Choose a unit. Switch between px and % depending on how the radius should scale.
Copy the CSS or Tailwind classes. Copy the generated border-radius CSS, or switch to the equivalent Tailwind rounded-* classes.

Frequently asked questions

How do I round only some corners in CSS?

border-radius accepts four values (top-left, top-right, bottom-right, bottom-left) — set only the corners you want rounded and leave the rest at 0.

What units can border-radius use?

Most commonly px for a fixed radius or % for a radius that scales with the element's size (50% on a square produces a circle).

How do I create a fully organic blob shape instead of rounded corners?

border-radius can approximate an organic shape with very different per-corner values, but for true wavy/blob shapes use border-radius with 8 values, or try the dedicated CSS blob generator for SVG-based organic shapes.

Can I export the border-radius as Tailwind classes?

Yes. Toggle Tailwind mode to get the closest matching Tailwind rounded-* utility classes instead of raw CSS.

Is this border-radius generator free?

Yes — completely free with no sign-up, and it runs entirely in your browser.

Does it support a dark mode preview?

Yes, toggle the light/dark preview to check the shape against both backgrounds.