border-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

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

試してみましょう

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

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* 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: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

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-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
パーセント値一括指定の次の各プロパティとして
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

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

<border-image-source> =
none |
<image>

<border-image-slice> =
[ <number [0,∞]> | <percentage [0,∞]> ]{1,4} &&
fill?

<border-image-width> =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<border-image-outset> =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}

<border-image-repeat> =
[ stretch | repeat | round | space ]{1,2}

<image> =
<url> |
<gradient>

<length-percentage> =
<length> |
<percentage>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

ビットマップ

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

8 つのダイヤ: 4 つの赤いダイヤが各コーナーに 1 つずつ、 4 つのオレンジのダイヤが各辺に 1 つずつ。真ん中は空。

HTML

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

CSS

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

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

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

結果

グラデーション

HTML

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

CSS

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

結果

角丸の境界線

border-radius は境界画像に効果がありません。これは、 border-image-outset は画像を境界ボックスの外に置くことができるので、境界画像が境界領域でクリップされることに意味がないからです。境界画像を使用して角を丸めるには、画像自体の角を丸めて作成するか、グラデーションの場合は背景として描画する必要があります。次の例では、境界線を拡張する画像とパディング枠に使用する画像の 2 つの background-imageを使用する手法を示します。

HTML

html
<div id="rounded">
  この要素は、角が丸められた境界線で囲まれています!
</div>

CSS

css
#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

結果

メモ: この用途に向けて新しい background-clip: border-area の値が提案されています。

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image
fill
<gradient>
optional <border-image-slice>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報