CSS Border Radius: Shapes, Blobs, and Creative Corners

CSS border-radius is far more powerful than most developers realize. Beyond simple rounded corners lies a full 8-value syntax that can create elliptical corners, organic blob shapes, and complex geometric forms — all with pure CSS.

The jump from 4-value to 8-value syntax is where the real creativity begins. Each corner can have independent horizontal and vertical radii, enabling the kind of fluid, organic shapes that were previously only possible with SVG.

border-radius syntax (1 to 4 values)

border-radius accepts 1 to 4 values using standard CSS shorthand. One value: all four corners equal. Two values: first applies to top-left and bottom-right, second to top-right and bottom-left. Three values: top-left, then top-right and bottom-left, then bottom-right. Four values: top-left, top-right, bottom-right, bottom-left (clockwise from top-left).

Shorthand and longhand

The shorthand border-radius sets all corners at once. The longhand properties set individual corners: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Longhand is useful when you want to animate only one corner or override a specific corner in a component.

The 8-value syntax for asymmetric shapes

The 8-value syntax uses a slash to separate horizontal and vertical radii: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv. Before the slash are horizontal radii for each corner (top-left, top-right, bottom-right, bottom-left). After the slash are vertical radii for each corner. This allows elliptical corners — instead of circular arcs, corners are quarter-ellipses.

Creating circles and pills

For a circle: set border-radius: 50% on a square element. The 50% calculates relative to the element dimensions, creating a perfect circle. For a pill (capsule) shape: set border-radius: 9999px on a rectangular element. The large value exceeds any possible element size, clamping to the maximum possible radius.

Blob shapes technique

Blob shapes use the 8-value syntax with asymmetric values to create organic, fluid shapes. A typical blob: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. The trick is that horizontal and vertical radii are different on the same corner, creating non-circular arcs. Animating between two blob shapes creates a flowing, morphing effect.

UI design patterns

Common border-radius patterns in UI: 4-8px for subtle card corners (Material Design default), 12-16px for prominent cards (iOS-style), 50% for avatar circles and toggle switches, 9999px for chips and badges, 0 for sharp corners on full-bleed elements. Consistency in border-radius creates visual cohesion — use a design token system with a limited set of radius values.

Frequently Asked Questions