Summary: Enable fine-tuning corners, on top of the existing border-radius, by specifying the shape/curvature of the corner. This allows shapes like squircles, notches, scoops etc., and animating between them.
Intent: https://groups.google.com/a/chromium.org/g/blink-dev/c/UKLLVghiHYQ/m/tv0ANlToEQAJ
Spec: https://drafts.csswg.org/css-borders-4/#corner-shaping
Explainer: https://github.com/noamr/explainers/blob/main/corner-shape-explainer.md
Other Resources:
=== This is a demo of CSS corner-shape
===
https://drafts.csswg.org/css-borders-4/#typedef-corner-shape-value
// corner-shape: squircle;
, which equals to superellipse(4)
.
// corner-shape: round;
, which equals to superellipse(2)
.
// corner-shape: bevel;
, which equals to superellipse(1)
.
// corner-shape: notch;
, which equals to superellipse(0)
.
// corner-shape: scoop;
, which equals to superellipse(0.5)
.
// corner-shape: straight;
, which equals to superellipse(infinity)
.