We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 にも適用されます。
継承不可
パーセンテージ以下の一括指定の各プロパティとして
メディアvisual
計算値以下の一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

16

7 -webkit-

12

12 -webkit-

151 2 3 4

3.5 -moz- 5

44 -webkit- 6

11

10.5

11 -o-

6

3 -webkit-

optional <border-image-slice> ? ?15 ? ? ?
fill keyword あり ?15 ? ?6
<gradient> あり ?29 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 -webkit- ?

あり

あり -webkit-

151 2 3 4

4 -moz- 5

44 -webkit- 6

11 -o-

6

3.2 -webkit-

?
optional <border-image-slice> ? ? ?15 ? ? ?
fill keyword18 ? ?15 ?6 ?
<gradient> あり ? ?29 あり あり ?

1. Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).

2. Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).

3. 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).

4. Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).

5. An earlier version of the specification was implemented, prefixed, in Firefox versions prior to 15.

6. 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.

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

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