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.

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

試してみましょう
--------

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

構成要素のプロパティ
----------

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

* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
構文
--


```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` を参照してください。

アクセシビリティの考慮
-----------

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

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `border-image-slice`: 境界画像の大きさに対する相対値
* `border-image-width`: 境界画像領域の幅または高さに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `border-image-outset`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `border-image-repeat`: 指定通り
* `border-image-slice`: 1 つから 4 つのパーセント値 (指定通り) または絶対的な長さ。指定されていれば続けてキーワード `fill`
* `border-image-source`: `none` または画像の絶対化した URI
* `border-image-width`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-image-outset`: 計算値の型による
* `border-image-repeat`: 離散値
* `border-image-slice`: 計算値の型による
* `border-image-source`: 離散値
* `border-image-width`: 計算値の型による
 |

形式文法
----
```

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

例
-

### ビットマップ

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

![境界画像の例](/ja/docs/Web/CSS/border-image/border.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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` 関数
* グラデーション関数: `conic-gradient()`, `repeating-conic-gradient()`, `linear-gradient()`, `repeating-linear-gradient()`, `radial-gradient()`, `repeating-radial-gradient()`