MockupShelf / Free Tools / Border Radius Generator
Drag sliders to shape the corners

Shape Presets

Click any preset to apply it instantly

Free CSS Border Radius Generator — shape every corner visually.

Stop guessing border-radius values. Drag the sliders, watch the shape update live, then copy the CSS in whatever format your project needs — plain CSS, CSS custom property, SCSS, React inline style, or Tailwind config. No sign-up, no limits.

Switch between px, %, and rem at any time. Link all four corners to move them together, or unlock them for asymmetric shapes. Enable elliptical mode to unlock the horizontal/vertical slash syntax for organic curves.

What you get

Frequently asked questions

CSS border-radius rounds the corners of an element's border box. A single value rounds all four corners equally. The shorthand accepts up to four values in the order top-left, top-right, bottom-right, bottom-left.
px gives a fixed radius regardless of element size. % is relative to the element's dimensions — 50% on a square creates a perfect circle. rem is relative to the root font size, keeping radius consistent with your type scale.
Apply border-radius: 50% to a square element. Use the Circle preset in this generator to set it in one click.
The slash syntax — border-radius: 80px / 40px — sets separate horizontal and vertical radii for each corner. This produces elliptical arcs rather than circular ones, creating oval, leaf, and organic blob shapes.
Set border-radius: 9999px. A very large value ensures short sides are fully rounded regardless of element height. Use the Pill preset for one-click application.
Yes — completely free for any personal or commercial project. No attribution required.