Chrome 147で追加された4つのCSS新機能、border-shapeで自由な形状が可能に
2026年4月7日にアップデートされたChrome 147で、CSSとUIに関する新機能が4つ追加されました。中でも注目は、要素のボーダーをあらゆる形状にできるborder-shapeプロパティです。これまでCSSだけでは難しかった柔軟なボーダー表現が、標準プロパティひとつで実現できるようになります。本記事では、各機能の概要とWebディレクターが押さえておくべきポイントを整理します。
border-shapeプロパティとは
border-shapeは、要素のボーダーの形状を自由に定義できる新しいCSSプロパティです。従来、ボーダーの形状を変えるにはborder-radiusで角丸にする程度が限界で、より複雑な形状にはSVGやclip-pathなどの代替手段が必要でした。
border-shapeを使えば、clip-pathと同じ形状を作成できますが、その仕組みは根本的に異なり、ボックス自体を再定義するため、新しい形状に沿って背景や境界線などがすべて従います。デザインカンプで「この角だけ斜めにカットしたい」といった要望があったとき、実装の選択肢が広がります。
その他のCSS新機能
Chrome 147ではborder-shape以外にも、実務に関わる機能が追加されています。
ひとつはタイムラインの名前付き範囲スクロールです。Scroll-Driven Animations APIにおけるViewTimelinesの名前付き範囲セットを拡張し、スクロール範囲を追加するもので、スクロールコンテナ全体を参照できるようになります。
もうひとつはcontrast-color()関数です。色値の引数を受け取り、その色に対してコントラストのもっとも高いブラックまたはホワイトを返す関数で、メディアクエリと組み合わせることでライトモードとダークモードの両方で読みやすいテキストカラーを自動的に取得できます。
さらに、widthプロパティとstyleプロパティの分離も行われました。border-width、outline-width、column-rule-widthの計算値が、styleプロパティとは関係なく常に設定した値を反映するようになり、FirefoxやWebKitと同様の挙動になります。
Webディレクターが押さえるべきポイント
これらの新機能はChrome 147以降でのサポートとなるため、プロジェクトで採用する際にはブラウザ対応状況の確認が必要です。特にborder-shapeは新しいプロパティのため、他ブラウザでのサポート時期についても確認が必要です。
制作進行の観点では、以下を意識しておくとよいでしょう。
- デザイナーとの共有: border-shapeで実現できる表現の幅をデザイナーに伝えることで、デザインの可能性が広がる
- フォールバック設計: 非対応ブラウザ向けに
border-radiusや従来手法でのフォールバックを設計に含める - 段階的な導入: まずは装飾的な要素（カード、バッジなど）から試し、重要なUIには慎重に適用する
導入までの進め方
新しいCSSプロパティをプロジェクトに取り入れる際は、段階的なアプローチが有効です。まずCan I Useなどでブラウザ対応状況を確認し、プロジェクトのターゲットブラウザと照合します。次に、デザインチームと「この表現ならborder-shapeで対応可能」といった具体的なすり合わせを行います。
実装フェーズでは、@supportsルールを使って対応ブラウザのみに新しいスタイルを適用し、非対応環境では既存のスタイルを維持するプログレッシブエンハンスメント（Progressive Enhancement：対応環境から順に機能を拡張する手法）の方針で進めるのが安全です。
プログレッシブエンハンスメントの判定フロー
まとめ
Chrome 147で追加されたborder-shapeプロパティは、CSSだけで多彩なボーダー形状を実現する注目の機能です。contrast-color()関数やタイムラインの名前付き範囲スクロール、widthとstyleの分離と合わせて、フロントエンド実装の自由度が一段上がりました。すぐに本番投入する必要はありませんが、対応状況をウォッチしつつ、デザイナーやエンジニアと「こんな表現が標準CSSでできるようになった」という情報共有から始めてみてください。