CSS Border Radius Generator

top-left, top-right, bottom-right, bottom-left — clockwise starting from the top-left corner. This is the same ordering CSS uses for margin/padding/border-width shorthands, but it's easy to misremember for border-radius specifically since designers often think in a different order (or per-corner named properties). This tool always emits all four values explicitly, so there's no shorthand-collapsing ambiguity to double-check.

Set all four corners to 50% on a square element (equal width and height) — each corner's quarter-ellipse then becomes a quarter-circle exactly matching the element's radius, and the four together form a perfect circle. On a non-square element, 50% on all corners instead gives a 'stadium'/pill shape (fully rounded short ends), which is the standard way to build a pill-shaped button or badge.

The single-value syntax (`border-radius: 16px 8px 16px 8px`) gives every corner a circular arc — the same radius in both directions. The elliptical syntax (`16px 8px 16px 8px / 8px 4px 8px 4px`) lets each corner's horizontal and vertical radius differ, producing a squashed or stretched arc per corner — this is what creates the asymmetric 'organic blob' shapes rather than uniformly rounded rectangles.

border-radius is capped, per corner, at half the element's side length in that dimension — once a corner's radius reaches that cap, increasing it further has no additional visual effect, since the corner has already become a full quarter-circle (or quarter-ellipse) meeting the adjacent corner's arc. This is exactly how the 50%-for-a-circle trick works: 50% is already past every square element's cap, so it always produces the maximum possible rounding.

px gives a fixed, predictable radius regardless of the element's size — the right choice for a consistent design-system corner radius across differently-sized components. % scales the radius relative to the element's own width/height, which is what you want for shapes that should stay proportional as the element resizes (a circular avatar that scales with its container, for instance) rather than keeping a constant absolute curve.

By default, border-radius rounds the border and background, but a child element or background image can still visually overflow the rounded corners. Add `overflow: hidden` on the same element if you need content (an <img>, for instance) actually clipped to the rounded shape rather than just the border/background respecting it.

Yes — it's a fully animatable property, and animating between two different corner shapes (say, a rounded square morphing to a circle) is a common micro-interaction. It's a layout-neutral property like box-shadow (it never changes the element's box model), but unlike opacity/transform it isn't always GPU-composited in every engine, so test an animation's smoothness on the actual devices you care about before relying on it for something performance-sensitive.

A true squircle is a superellipse — a smoother, more continuous curve than any four-corner border-radius arc can produce, popularized by iOS app icons. border-radius can only approximate it with elliptical corners; a genuine squircle needs an SVG path or the (still limited-support) CSS `corner-shape` property. This tool's elliptical mode gets visually close for most UI purposes without needing either.