CSS Border Radius Generator

From Sharp Boxes to Organic Shapes

The Superellipse Secret

CSS border-radius creates standard circular arcs, but the shapes we find most appealing — like Apple's iOS icons — use a superellipse(squircle) curve. A standard 20% border-radius creates a noticeable “pinch” where the curve meets the straight edge. Superellipses use a continuous curvature that flows more naturally. While CSS alone cannot produce true superellipses, you can approximate them with the eight-value shorthand by giving adjacent corners slightly different horizontal and vertical radii.

The Full Syntax

border-radius: TL TR BR BL / TL TR BR BL

The slash separates horizontal and vertical radii for each corner, creating elliptical curves. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% produces an egg shape. Without the slash, each value sets both axes equally, creating circular arcs. The browser also applies a corner-overlap correction: if adjacent corners sum to more than the element's dimension, all radii are scaled down proportionally to prevent overlap.

Design System Scales

Mature design systems define a radius scale just like spacing or font sizes. A common pattern: 2px for subtle rounding on small inputs, 8px for cards and containers, 16px for modals and dialogs, and 9999pxfor pill buttons and tags. Tailwind CSS encodes this as rounded-sm (2px), rounded-lg (8px), rounded-2xl (16px), and rounded-full. Consistency in border-radius across your UI creates visual cohesion that users perceive as “polished” even if they cannot articulate why.

The overflow:hidden Trap

A rounded container does not automatically clip its children to the curve. An image inside a border-radius: 16px div will poke through the corners unless you add overflow: hidden. But beware: overflow:hidden creates a new stacking context and clips all descendants — including tooltips, dropdowns, and absolutely positioned elements. For cards that need rounded corners and overflow-visible children, apply border-radius directly to the child element or use clip-path: inset(0 round 16px) as a more targeted alternative.

Frequently Asked Questions

Why does border-radius: 50% make a circle on a square but an ellipse on a rectangle?

Percentage values are relative to the element's dimensions: 50% of width for horizontal radii, 50% of height for vertical radii. On a 200x200px square, this produces equal 100px radii in both axes — a perfect circle. On a 300x150px rectangle, you get 150px horizontal and 75px vertical radii, creating an ellipse. Use a fixed pixel value like 9999px to force a circular curve regardless of aspect ratio.

How do I create organic blob shapes with border-radius?

Use the eight-value slash syntax with varied percentages, for example: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Each corner gets different horizontal and vertical curves, producing an asymmetric organic shape. Animate between two such states for a smooth morphing blob effect often seen on modern landing pages.

Does border-radius affect the element's box model or click area?

Border-radius is purely visual — it does not change the box model, margin, or padding calculations. However, it does affect the pointer hit-test region: clicks on the clipped corner areas will not register on the element. This can cause usability issues on heavily rounded interactive elements if the clickable area becomes too small.