Border Radius Generator

Working with the Border Radius Generator

1. Start linked. With the "Linked" toggle on, moving any corner slider adjusts all four evenly - fastest way to block out a pill, a circle, or a standard card.
2. Switch to unlinked when you need asymmetry. Each of the four sliders maps to top-left, top-right, bottom-right, bottom-left - the same order the CSS shorthand uses.
3. Flip units between px and %. Pixels stay constant as the element resizes; percentages track the box dimensions and produce elliptical corners on non-square elements.
4. Try the preset shapes - squircle, blob, pill, circle - as a starting point before you fine-tune.
5. Copy the CSS. The output uses the four-value shorthand border-radius: a b c d, which is copy-ready for any stylesheet or Tailwind rounded-[var] arbitrary value.

How border-radius is actually drawn

CSS border-radius produces a quarter-ellipse at each corner of the element\'s border box. The horizontal radius clips the top/bottom edges; the vertical radius clips the left/right edges. When you write a single value like 12px, both radii are equal and you get a circular arc. When you use the slash form 12px / 24px, the horizontal and vertical radii differ and you get a true elliptical corner - the shape designers sometimes call a "squircle-ish" bulge.

The browser rasterizes these arcs using the same anti-aliased path rendering that handles SVG, so rounded corners remain crisp at any devicePixelRatio. Backgrounds, borders, box-shadow, and any overflow: hidden clipping all respect the rounded outline automatically. One subtle consequence: border-radius applies to the border box, so a thick border visually ends up with a tighter inner curve than outer curve, which is mathematically correct but can look off on icon buttons. The CSS Backgrounds and Borders Module Level 3 specifies this rendering, and every modern browser matches the spec pixel-for-pixel.

Real situations where you need it

• Card components at 8-16px radius - the dominant look across shadcn/ui, Material, and iOS.
• Avatars at 50% for a perfect circle as long as the element is square.
• Pill-shaped buttons using border-radius: 9999px - the huge value caps out at half the shorter side, giving a fully rounded end no matter the aspect ratio.
• Asymmetric cards like chat bubbles where one corner is squared and the others rounded.
• Organic "blob" decorations using the eight-value a b c d / e f g h slash form to give each corner a unique elliptical shape.
• Image masks where rounded corners plus overflow: hidden clips the content without needing SVG.

Edge cases that trip people up

• Percentage on non-square elements. border-radius: 50% on a 200x100 box makes an ellipse, not a circle. Use 9999px for a guaranteed pill and equal width/height for a guaranteed circle.
• Radii larger than the box. The browser automatically scales them so adjacent corners never overlap - border-radius: 500px on a 40px button gives the same visual result as 20px. There\'s no need to clamp it yourself, but be aware the literal number you see in DevTools may not render.
• Inner vs outer curve on borders. With a 4px border and an 8px radius, the outside curve has a 8px radius and the inside has a 4px one. Add padding plus a smaller inset box-shadow if you want both curves to match.
• Transparent backgrounds plus background-image. An image set with background-image clips to the rounded corners; but <img> tags inside an element don\'t - you\'ll need overflow: hidden on the wrapper.
• Focus outlines. Many browsers now draw the :focus-visible outline following the radius (per CSS UI Level 4), but older builds still drew a rectangle - if you need a rounded focus ring everywhere, apply outline-offset plus a custom box-shadow.
• True iOS-style "squircles". CSS arcs are circular, not the superellipse Apple uses. To match iOS app icons you need the CSS Houdini Paint API or an SVG shape.

The spec and history behind it

Rounded corners were one of the most requested CSS features of the 2000s - before support landed, developers used nested rounded-PNG corners, image sprites, or JavaScript canvas hacks. border-radius appeared in Firefox 1.0 (2004) with the -moz- prefix, then -webkit-, and finally unprefixed in all major browsers around 2011 with IE9. It is now defined in CSS Backgrounds and Borders Module Level 3 along with the extended per-corner properties (border-top-left-radius, etc.) and the elliptical slash syntax. Every value in the shorthand accepts any <length> or <percentage>, and logical-property variants like border-start-end-radius are specified in CSS Logical Properties Level 1 for RTL-friendly layouts.

Generator vs writing it by hand

For a single border-radius: 8px you absolutely do not need a tool. Where this generator earns its keep is when you need asymmetric or elliptical corners - the eight-value syntax 40px 20px 40px 20px / 20px 40px 20px 40px is genuinely hard to visualize without a live preview. Figma and Sketch output the same property via plugins, but they don\'t let you experiment with CSS-specific quirks like the border-radius scaling rule or how percentages behave on fluid containers. Compared to Tailwind\'s rounded-* utilities, this tool shows you what numeric pixel value each class maps to, which is useful when you need one-off values outside the scale. For design-system work, the best workflow is: prototype here, pick three to five values that cover your needs, and then codify them as tokens.