Widely available YES。主要ブラウザで対応済み。装飾的なボーダーが必要な場面で使用可能。

Border images

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

メモ: 境界画像の読み込みに失敗したときのために、 border-style を指定してください。仕様では厳密には要求されていませんが、border-style が none または border-width が 0 の場合、境界画像を描画しないブラウザーもあります。

装飾画像

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
border-image
16
12
15
6
18
6
その他
css.properties.border-image-outset

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。
15
12
15
6
18
6
css.properties.border-image-repeat

border-image-repeat は CSS のプロパティで、境界画像の辺と中央部分の画像がどのように変倍され、タイル状に配置されるかを定義します。中央領域は、border-image-slice プロパティでキーワード "fill" を使用することで、表示させることができます。
15
12
15
6
18
9.3
CSS プロパティ
repeat
15
12
15
6
18
9.3
round
30
12
15
9.1
30
9.3
space
56
12
50
9.1
56
9.3
stretch
15
12
15
6
18
9.3
その他
css.properties.border-image-slice

border-image-slice は CSS のプロパティで、 border-image-source で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。
15
12
15
6
18
6
css.properties.border-image-source

border-image-source は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。
15
12
15
6
18
6
css.properties.border-image-width

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。
16
12
13
6
18
6
CSS プロパティ
auto
16
12
15
6
18
6
fill
16
12
15
6
18
6
gradient

`<グラデーション>`
7
12
29
4
18
3.2
none
16
12
3.5
3
18
2
optional border image slice

オプションの `<border-image-slice>`
16
12
15
6
18
6
repeat
16
12
3.5
3
18
2
round
16
12
3.5
3
18
2
space
16
12
3.5
3
18
2
stretch
16
12
3.5
3
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • Chrome 112 より前では、境界線画像の絶対またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない場合があります (バグ 40541033)。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
注釈 2件
実装メモ
  • エッジ 112 より前では、境界線イメージの絶対またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない可能性があります (バグ 40541033)。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 6件
実装メモ
  • 「border-image-slice」のパーセンテージが浮動小数点ではなく整数に計算されるため、小さな SVG が誤って引き伸ばされます (バグ 1284797)。
  • Firefox 47 までは、ビューポートのない SVG は正しくスライスされませんでした (バグ 619500)。
  • Firefox 48 から Firefox 49 まで、ビューポートのない SVG はビューポートのある SVG と同じように表示されますが、スライスが正確に 50% でな​​い場合、スライスは誤って引き伸ばされます (バグ 1264809)。
  • Firefox 57 までは、e10s が無効になっている場合、ビューポートのない SVG で問題が発生していました (バグ 1290782)。
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3.5)
  • Firefox 15 より前は、仕様の以前のバージョンがプレフィックス付きで実装されていました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 2件
実装メモ
  • Chrome Android 112 より前では、境界線画像の絶対幅またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない場合があります (バグ 40541033)。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (2)
注釈 4件
実装メモ
  • 「border-image-slice」のパーセンテージが浮動小数点ではなく整数に計算されるため、小さな SVG が誤って引き伸ばされます (バグ 1284797)。
  • Firefox 47 までは、ビューポートのない SVG は正しくスライスされませんでした (バグ 619500)。
  • Firefox 48 から Firefox 49 まで、ビューポートのない SVG はビューポートのある SVG と同じように表示されますが、スライスが正確に 50% でな​​い場合、スライスは誤って引き伸ばされます (バグ 1264809)。
  • Firefox 57 までは、e10s が無効になっている場合、ビューポートのない SVG で問題が発生していました (バグ 1290782)。
注釈 1件
実装メモ
  • Chrome 112 より前では、境界線画像の絶対またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない場合があります (バグ 40541033)。
注釈 1件
実装メモ
  • エッジ 112 より前では、境界線イメージの絶対またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない可能性があります (バグ 40541033)。
注釈 1件
実装メモ
  • Chrome Android 112 より前では、境界線画像の絶対幅またはパーセンテージの長さの幅が、より狭い「border-width」よりも優先されない場合があります (バグ 40541033)。

基本構文

CSS 
/* Gradient border */
.gradient-border {
  border: 3px solid;
  border-image: linear-gradient(45deg, #f06, #9f6) 1;
}

/* Image Border */
.fancy-border {
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

ライブデモ

Gradientboundary

Border images Gradientboundary demo.

プレビュー全画面表示

gradient

Border images gradient demo.

プレビュー全画面表示

rainbowcolorborder

Border images rainbowcolorborder demo.

プレビュー全画面表示

実務での使いどころ

  • グラデーションボーダー

    カードやボタンにグラデーションのボーダーを適用し、単色では表現できない装飾的な境界線を作成する。

  • 装飾的なフレーム

    画像を使った装飾的なフレーム（証明書、招待状など）を border-image で実現する。

注意点

  • border-image は border-radius と併用できない（角丸が無視される）。
  • border-image-slice の値設定が直感的でなく、画像に合わせた調整が必要になることが多い。

アクセシビリティ

  • 装飾的なボーダーは視覚的な演出であり、情報伝達に使用しないこと。重要な境界の視認性は色やコントラストで確保する。

参考リンク