CSSborder-image プロパティは、要素の border-style の代わりに画像を描画します。

このプロパティは border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat一括指定プロパティです。他の一括指定プロパティと同様、省略された値には初期値が設定されます。

メモ: 境界画像の読み込みに失敗したときのために、 border-style を指定してください。実際、すべてのブラウザーが border-image に対応している訳ではないため、これは仕様書によれば必須となっています。

構文

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

border-image プロパティは以下に挙げられた1つから5つの値で指定することができます。

メモ: border-image-source計算値none になったり、画像が表示できなかったりした場合は、 border-style が代わりに表示されます。

<'border-image-source'>
元となる画像です。 border-image-source を参照してください。
<'border-image-slice'>
source の画像を領域に分割する座標です。4つまでの値が指定できます。 border-image-slice を参照してください。
<'border-image-width'>
境界画像の幅です。4つまでの値が指定できます。 border-image-width を参照してください。
<'border-image-outset'>
要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 border-image-outset を参照してください。
<'border-image-repeat'>
source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 border-image-repeat を参照してください。

形式文法

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

ビットマップ

この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。

境界画像の例

HTML

<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>

CSS

個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための 27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。

#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image:
      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
      27 /                    /* slice */
      36px 28px 18px 8px /    /* width */
      18px 14px 9px 4px       /* outset */
      round;                  /* repeat */
}

結果

グラデーション

HTML

<div id="gradient">この要素はグラデーションの境界に囲まれています。</div>

CSS

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}

結果

アクセシビリティの考慮事項

支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-image の定義
勧告候補 初回定義

初期値一括指定の各プロパティとして
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
パーセンテージ一括指定の各プロパティとして
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 16
完全対応 16
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 15
補足
完全対応 15
補足
補足 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
補足 Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
補足 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
補足 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
完全対応 3.5
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11Opera 完全対応 10.5
完全対応 10.5
完全対応 11
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 6
完全対応 6
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 15
補足
完全対応 15
補足
補足 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
補足 Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
補足 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
補足 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 6
完全対応 6
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
optional <border-image-slice>Chrome ? Edge ? Firefox 完全対応 15IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 15Opera Android ? Safari iOS ? Samsung Internet Android ?
fill keywordChrome 完全対応 ありEdge ? Firefox 完全対応 15IE ? Opera ? Safari 完全対応 6WebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 6Samsung Internet Android ?
<gradient>Chrome 完全対応 ありEdge ? Firefox 完全対応 29IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 29Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,