demo · v136

Icon Grid & Chat Bubbles

Two of the canonical motivations for corner-shape: iOS-style app icon squircles you can't fake with border-radius, and chat bubbles whose tail corner has a different shape from the rest of the frame using per-corner properties.

Behind a flag Enable chrome://flags/#enable-experimental-web-platform-features to see squircle/scoop render. Without the flag the corners fall back to plain border-radius.
Probing corner-shape…

iOS-style app icon grid

Apple's icon shape is a true superellipse, not a rounded rectangle. The corners curve more gradually than a circle, so the corner area looks less "stuck on" at large radii. With one declaration that ratio is preserved at every size.

M
W
P
N
C
F
S
G
.icon { border-radius: 22%; corner-shape: round; }

chat bubbles with per-corner shapes

The spec adds corner-bottom-left-shape and friends so one corner of a bubble can be a tight scoop (the "tail" pointing at the speaker) while the other three stay rounded. No SVG, no pseudo-element triangle, no extra DOM.

Hey, did you see the corner-shape demo?
Just opened it. The scoop tail is one CSS line.
Wait — same border-radius, three rounded corners, one scoop?
Yep. corner-bottom-right-shape: scoop; 🍦
.bubble.me { border-radius: 22px; border-bottom-right-radius: 6px; corner-bottom-right-shape: scoop; /* the "tail" */ }

why this angle

The first concept is the playground — one tile, every shape value, sliders for the math. This concept is the two real-world layouts the spec was written for: a multi-icon grid where iOS users will instinctively read non-squircle rendering as "wrong", and message bubbles where per-corner control replaces a small mountain of workaround CSS that's been shipped to apps like WhatsApp Web and Telegram Web for years.

see also