CSSに新たなプロパティ「corner-shape」が登場し、これまでclip-pathやSVGマスクなどのハック的手法でしか実現できなかった多様な角の形状が、ネイティブに指定可能になった。Smashing Magazineが詳細な解説記事を公開している。
corner-shapeは既存のborder-radiusを置き換えるものではなく、border-radiusが生成するカーブの「形状」を変更するプロパティである。対応する値にはround（従来の円形角）、squircle（Appleスタイルの超楕円カーブ）、bevel（直線的な斜め切り落とし）、scoop（内側に凹んだ曲線）、notch（鋭い内向きの切り込み）、square（丸みの完全除去）がある。さらにsuperellipse(n)関数による微細な制御や、四隅個別の形状指定も可能である。
これまで開発者たちはborder-radiusの制約に悩まされてきた。squircle角ひとつ取っても、clip-pathで近似するか、SVGマスクを適用するか、あるいはJavaScriptで描画するかといった脆弱なワークアラウンドが必要だった。corner-shapeはこれらの問題を根本的に解決し、CSSの宣言的な記述だけで意図した角の形状を表現できるようにする。
2026年3月時点でのブラウザ対応状況は、Chrome 139以降およびChromiumベースのブラウザで利用可能である。FirefoxおよびSafariは未対応だが、CSS Borders and Box Decorations Module Level 4のW3C Working Draftとして仕様策定が進んでおり、今後の対応拡大が期待される。日常的なUI開発において、角の形状デザインの自由度が大幅に広がるプロパティである。
出典: Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI
