CSS corner-shapeプロパティ作例とBaseline 2026春の最新動向

はじめに：CSSの「表現の壁」が再び突破された

2026年春、Webプラットフォームはまた一歩、デザインの自由と開発者の安心感を両立させる方向へ進んだ。特に注目したいのは、corner-shapeプロパティの登場だ。これまで「折り曲げた角」を表現するためには、擬似要素やSVG、あるいはclip-pathの複雑な組み合わせが必要だった。しかし今、CSSだけでそれが可能になった。

本記事では、corner-shapeの具体的な使い方と、その背景にあるBaselineの仕組み、そしてWeb開発者が今すべきことを考察する。

corner-shapeで実現する「折り曲げ角」

corner-shapeは、要素の角の形状を「折り曲げたように」変形できるCSSプロパティだ。従来のborder-radiusが丸みを帯びた角を作るのに対し、corner-shapeは角を直線的に折り返すような表現を可能にする。

基本的な構文と実例

/* すべての角を折り曲げる */
.card {
  corner-shape: bevel;
  corner-radius: 10px;
}

これにより、カードやボタンの角が紙を折り曲げたような見た目になる。さらに、擬似要素を一切使わず、かつアクセシビリティを損なわない。CSS-Tricksの記事でも指摘されているように、このプロパティは「視覚的な遊び心」と「実用的なUI」の橋渡しになる。

実装のポイント

• ブラウザ対応：2026年4月時点で、Chrome 120以降、Edge 120以降、Safari 17.4以降でサポート。Firefoxは開発中。
• Baselineステータス：まだ「新しく利用可能」だが、主要ブラウザの安定版に搭載されつつある。
• 注意点：corner-radiusと組み合わせて使うと、通常の角丸と折り曲げ角の中間的な表現も可能。ただし、パフォーマンスへの影響はほとんどない。

Baselineが保証する「使える安心感」

ここで重要なのが、Baselineという概念だ。Baselineは、Googleが提唱する「Webプラットフォーム機能の安定性指標」で、主要ブラウザの最新2バージョンすべてでサポートされている機能を「Baseline対応」と呼ぶ。

2026年2月・3月のBaselineダイジェストでは、corner-shapeを含む複数のCSSプロパティが新たにリストアップされた。これにより、開発者は「この機能はもう大丈夫」と判断しやすくなった。

Baselineの効能

• 新機能の採用判断が容易になる
• ベンダープレフィックスやpolyfillの依存から解放される
• ユーザー環境による表示崩れのリスクが減る

言い換えれば、Baselineは「表現力」と「安定性」を天秤にかけなくて済むようにする仕組みだ。

scrollytellingとcorner-shapeの組み合わせ可能性

ちなみに、同じ2026年春のCSS-Tricksでは、母親向けの「scrollytelling」作例も公開されている。これはスクロールに応じてストーリーが展開する手法で、corner-shapeをカードUIに適用すれば、紙のパンフレットをめくるような温かみのある体験が実現できる。

例えば、写真やメッセージカードの角を折り曲げて「めくった跡」を表現し、スクロールで次のコンテンツが現れる——そんなインタラクションは、ユーザーに「手触り感」を与えるだろう。

AIエンジニアがcorner-shapeをどう活用するか

AIでコンテンツを自動生成する際、UIコンポーネントの見た目をランダムにバリエーションさせたいケースがある。従来はCSSの複雑な関数やJavaScriptで対処していたが、corner-shapeを使えば、プロンプトで「折り曲げ角のあるカード」と指定するだけで、視覚的に統一感のあるコンポーネントが生成できる。

たとえば、以下のようなプロンプトを想定する。

「商品カードを5種類生成。カードの角はすべて折り曲げスタイル（corner-shape: bevel）で、色とレイアウトはランダムに変化させる。」

こうしたプロンプトを処理するAIコードは、corner-shapeが標準化されているおかげで、ブラウザ互換性を考慮せずに済む。CSSのカスタムプロパティと組み合わせれば、さらに柔軟なデザインシステムを構築できる。

まとめ：2026年春、開発者が取るべき戦略

CSS corner-shapeは、一見小さな機能に見えるかもしれない。しかし、Baselineという枠組みで見たとき、これは「Webプラットフォームが表現の自由を、安定性とともに提供する」という大きな流れの一部だ。

• 今すぐ試す：ローカル環境やコードペンでcorner-shapeをテストしてみよう。
• プロダクションへの導入：2026年後半には主要ブラウザのシェアが90%を超えると予想される。秋以降のリリースでは積極採用を検討したい。
• AIとの組み合わせ：AIによるコンポーネント生成の際、デザインの選択肢としてcorner-shapeをリストアップしておくと有用。

Webデザインの「当たり前」は、常にアップデートされている。その中心にあるのは、使えることが保証された標準機能だ。corner-shapeは、その象徴的な一手と言えるだろう。

参照

• New to the web platform in April — web.dev
• March 2026 Baseline monthly digest — web.dev
• February 2026 Baseline monthly digest — web.dev
• Using CSS corner-shape For Folded Corners — CSS-Tricks
• A Scrollytelling Gift for Mum on Mother’s Day 2026 — CSS-Tricks