MockupShelf / Free Tools / Border Radius Generator
Live Preview
Background
48px
80px
120×80

Shape Presets

Click any preset to apply

Free CSS Border Radius Generator — shape every corner visually.

Typing border-radius values by hand means constant trial and error — guess a number, paste it in, refresh, repeat. This free CSS border radius generator gives you live sliders for all four corners, so you see the exact shape as you drag. Switch between px, %, and rem in one click, or enable elliptical mode to unlock the horizontal/vertical slash syntax for organic curves.

When you're done, copy the output in whatever format your project needs — plain CSS, CSS custom property, SCSS variable, React inline style, or Tailwind config. Free, no sign-up, no limits.

What you get

Independent corner control

Drag sliders for top-left, top-right, bottom-right, and bottom-left independently. Toggle link mode to move all corners together.

px, %, rem unit switcher

Switch units at any time. Use % for circles and responsive shapes, px for fixed UI components, rem to match your typography scale.

Elliptical radius mode

Enable the slash syntax (border-radius: H / V) to set separate horizontal and vertical radii for oval and teardrop shapes.

Multi-size preview

The same border-radius shown at 48px, 80px, and 120×80px simultaneously — catch edge cases before they hit production.

5 export formats

CSS property, CSS custom property, SCSS variable, React borderRadius inline style, and Tailwind config block.

10 shape presets

Subtle, Rounded, Heavy, Pill, Circle, Squircle, Leaf, Ticket, Chat bubble, Diamond — apply in one click and adjust from there.

Frequently asked questions

Trustpilot
Excellent

Love MockupShelf? Leave us a review — it only takes 30 seconds.

Help other designers discover free mockups by sharing your experience on Trustpilot.

Write a Review
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.
Yes — completely free. No account, no watermarks, no limits. Use it as many times as you need for any project.
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 your radius consistent with your type scale.
The slash syntax — border-radius: 80px 20px / 20px 80px — sets separate horizontal and vertical radii for each corner. This produces elliptical arcs rather than circular ones, creating oval, leaf, teardrop, and organic blob shapes.
Apply border-radius: 50% to a square element (equal width and height). The Circle preset in this generator sets this automatically.
Set border-radius: 9999px. A very large value ensures the short sides are fully rounded regardless of element height. The Pill preset applies this in one click.
Switch to the React tab in the output panel. React inline styles use the camelCase borderRadius property: style={{ borderRadius: '16px' }}.
Absolutely. All code generated by this tool is free to use in any personal or commercial project — websites, apps, SaaS, client work, and more.