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
ChromeStatus: https://chromestatus.com/feature/5357329815699456?gate=6250071248863232
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).
❌ Your browser doesn't support this feature.
✅ Your browser supports this feature!
This is a demo for https://drafts.csswg.org/css-borders-4/#corner-shaping
Try it in Chrome 139 or over.
https://chromestatus.com/feature/5357329815699456?gate=6250071248863232.