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

試してみましょう

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

構成要素のプロパティ

このプロパティは以下の 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-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::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" ファイルです。

境界画像の例

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;
}

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報