demo · v139

Notch & Scoop Gallery

corner-shape isn't only for squircles. The same property unlocks notch (concave V cut), scoop (concave arc), bevel (flat 45°) and more — useful for tickets, tags, and stamp-shaped UI elements that the explainer specifically calls out.

Chrome 139+ ships corner-shape. In older browsers, the tiles below fall back to plain border-radius: the curves stay round and the cuts disappear. The CSS source is the same either way.

All tiles use border-radius: 32px; only the corner-shape value differs.

round
(default)
squircle
bevel
notch
scoop
straight

practical pieces

Use cases the explainer mentions: tickets (scoop corners, like a stub torn off), stamps (notched edges), and modern-OS surface treatments.

Boarding pass
seat 14A · 09:40 LHR → JFK
paid

the code

.ticket {
  border-radius: 24px;
  corner-shape: scoop;  /* concave arc, like a hole-punched stub */
}

.stamp {
  border-radius: 18px;
  corner-shape: notch;  /* concave V cut */
}

.button-soft {
  border-radius: 16px;
  corner-shape: squircle;  /* iOS-style smooth corner */
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.