border radius generator

How to use the border radius generator

  1. Adjust the four corner sliders independently — top-left, top-right, bottom-right, bottom-left.
  2. Switch to elliptical mode for asymmetric rounding (different horizontal and vertical radii per corner). Drag the handles on the preview to shape organic blob-like rectangles.
  3. Pick from presets: pill, capsule, leaf, ticket stub, squircle.
  4. Toggle unit between px, %, and rem. Percentage-based radii scale with the element's size; px stays fixed.
  5. Copy CSS or Tailwind utility output.

When to use it

Use px when you want consistent, predictable rounding that doesn't change with element size (buttons, badges, cards). Use % for symmetric rounding that scales with the element (50% creates a circle for any square). Use rem when you want rounding to scale with the root font size (useful for accessibility-sensitive layouts). Alternative: Fancy Border Radius generators exist but rarely offer all four units and elliptical handles together.

Example

/* Pill button */
.btn-pill { border-radius: 9999px; }

/* Squircle card (iOS-style) */
.squircle { border-radius: 28% / 20%; }

/* Ticket with notches (elliptical) */
.ticket {
  border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%;
}

/* Asymmetric organic blob */
.blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

Frequently asked questions

What's the difference between border-radius: 10px and border-radius: 10px / 20px?
The slash syntax specifies elliptical radii — horizontal / vertical. The first value becomes the x-radius, the second the y-radius, creating oval corners instead of circular ones.
How do I make a perfect circle?
Set border-radius: 50% on a square element. The 50% scales with size, so it stays a circle at any dimension.
What is a squircle?
A shape halfway between a square and a circle — used heavily in iOS (app icons) and macOS (window corners) since 2013. In CSS, approximate with border-radius: 25-30% or use clip-path with a superellipse formula for true squircles.
Why does my border-radius not apply?
Check that the element has no overflow: visible conflict and that children aren't visually overflowing. If the child has no border-radius and is positioned inside, set overflow: hidden on the parent so children are clipped to the rounded shape.
Can I animate border-radius?
Yes — it's fully interpolatable. Transitioning between a square and a pill shape animates smoothly.

Related generators

Last updated: 2026-04-23