demo · v136

Shape Explorer

Twist corner-shape across every value the spec accepts — round, scoop, bevel, notch, straight, squircle, and arbitrary superellipse(n). Sweep the curvature exponent to feel how a superellipse morphs between a circle (n=2), a squircle (n≈4), and a square (n→∞).

Note: corner-shape is not detected. Enable chrome://flags/#experimental-web-platform-features in Chrome 136+ to see the live shape change. The preview still renders the underlying border-radius.

corner-shape border-radius 40px

corner-shape

what each value does

round — the classic circular arc (same as plain border-radius).
scoop — the arc curves inward, biting a chunk out of the corner.
bevel — a straight diagonal cut.
notch — an inward right-angle cut, like a ticket stub.
straight — no curvature at all (square corner).
squircle — the Apple-flavoured smooth corner, equivalent to superellipse(4).
superellipse(N) — exponent N from 0 (concave bevel) through 2 (circle) to infinity (square).

what each value does

see also