demo · v136

Squircle

Drag the superellipse curvature and watch the same border-radius produce circle, squircle, scoop, or notch — all from one new CSS property.

Behind a flag — enable chrome://flags/#enable-experimental-web-platform-features to see corner-shape render. Without the flag the tiles below fall back to plain border-radius.
Probing browser support for corner-shape…
40px
2.0
round
corner-shape: round
squircle
corner-shape: squircle
scoop
corner-shape: scoop
bevel
corner-shape: bevel
notch
corner-shape: notch
superellipse(k)
superellipse(2.0)

the code

.card {
  border-radius: 40px;
  corner-shape: squircle;          /* round | squircle | scoop | bevel | notch */
}

.card.custom {
  corner-shape: superellipse(2.5); /* k > 2 = squircle, k < 2 = scoop */
}

see also