The CSS border-radius property, introduced in CSS3, fundamentally changed web design by enabling rounded corners without images, background hacks, or JavaScript. Before its widespread adoption around 2010, creating rounded corners required elaborate techniques like nested div elements with corner images, or the use of proprietary filters. The property works by defining elliptical curves at each corner of the element's border box, replacing the sharp 90-degree angles with smooth arcs.

Mathematically, border-radius creates quarter-ellipse curves at each corner. Each corner's curve is defined by two radii: a horizontal radius and a vertical radius. When both radii are equal, the result is a circular arc; when they differ, the result is an elliptical arc. The shorthand syntax border-radius: 10px creates uniform circular arcs at all four corners. The full eight-value syntax, written as border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, specifies independent horizontal and vertical radii for each corner (top-left, top-right, bottom-right, bottom-left). This eight-value form is what enables the creation of organic blob shapes where each corner has a unique asymmetric curve.

The underlying geometry connects to the concept of superellipses, a family of curves described by the equation |x/a|^n + |y/b|^n = 1. A standard ellipse has n=2, while a squircle (the smooth shape used by iOS app icons) uses n values between 4 and 5. CSS border-radius produces true elliptical arcs (n=2), which is why CSS-rounded rectangles look subtly different from iOS-style squircles. The distinction matters in design: elliptical border-radius creates a visible inflection point where the curve meets the straight edge, while a superellipse provides a smoother, more continuous transition. Some designers approximate squircle shapes using SVG clip-paths or carefully tuned border-radius values with percentage units.

Percentage values for border-radius are relative to the element's dimensions, with horizontal radii based on width and vertical radii based on height. Setting border-radius to 50% on a square element creates a perfect circle because the horizontal and vertical radii each equal half the element's dimension, creating four quarter-circle arcs that join into a full circle. On a rectangular element, 50% creates an ellipse. The value 9999px (or any very large pixel value) creates a pill or capsule shape because the browser automatically clamps the radius to half the shorter dimension of the element, rounding the short sides into semicircles while leaving the longer sides straight. This clamping behavior, defined in the specification, ensures that overlapping radii are proportionally reduced to fit the element dimensions.