Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
エフェクト Limited support

background-clip: border-area

従来の border-box がボーダーを含む全体に背景を描画するのに対し、border-area はボーダー部分（線の下）にのみ背景を描画します。太いボーダーにグラデーションや画像を背景として表示する効果を簡単に実現でき、装飾的なボーダーデザインの幅が広がります。

背景ボーダー

概要

従来の border-box がボーダーを含む全体に背景を描画するのに対し、border-area はボーダー部分（線の下）にのみ背景を描画します。太いボーダーにグラデーションや画像を背景として表示する効果を簡単に実現でき、装飾的なボーダーデザインの幅が広がります。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 18.2+
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 18.2+
Firefox Android 未対応

基本構文

CSS 
.gradient-border {
  border: 4px solid transparent;
  background: linear-gradient(45deg, red, blue);
  background-clip: border-area;
}

実務での使いどころ

  • グラデーションボーダーの実装

    透明なボーダーとグラデーション背景を組み合わせ、CSSだけでカラフルなグラデーションボーダーを実現できます。

注意点

  • 現在Safari 18.2以降でのみサポートされており、他の主要ブラウザでは未実装です。プロダクション利用には時期尚早です。

アクセシビリティ

  • 装飾的なボーダー効果のため、アクセシビリティへの直接的な影響は少ないですが、ボーダーが要素の境界を示す役割を果たす場合はフォールバックを用意してください。

参考リンク