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

background-clip: border-area

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

背景ボーダー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.background-clip.border-area
18.2
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

Gradientframeline

CSS Gradientframeline demo.

プレビュー全画面表示

reinbo-border

CSS reinbo-border demo.

プレビュー全画面表示

thickdecorationframe

CSS thickdecorationframe demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク