1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: border-image
slug: Web/CSS/border-image
tags:
- CSS
- CSS 背景と境界
- CSS プロパティ
- リファレンス
- recipe:css-shorthand-property
browser-compat: css.properties.border-image
translation_of: Web/CSS/border-image
---
{{CSSRef}}
**`border-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の[境界](/ja/docs/Web/CSS/border)を置き換えます。
{{EmbedInteractiveExample("pages/css/border-image.html")}}
> **Note:** 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。
## 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
- [`border-image-outset`](/ja/docs/Web/CSS/border-image-outset)
- [`border-image-repeat`](/ja/docs/Web/CSS/border-image-repeat)
- [`border-image-slice`](/ja/docs/Web/CSS/border-image-slice)
- [`border-image-source`](/ja/docs/Web/CSS/border-image-source)
- [`border-image-width`](/ja/docs/Web/CSS/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: unset;
```
`border-image` プロパティは以下に挙げた 1 つから 5 つの値で指定します。
> **Note:** {{cssxref("border-image-source")}} の [計算値](/ja/docs/Web/CSS/computed_value) が `none` であったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。
### 値
- `<'border-image-source'>`
- : 元となる画像です。 {{cssxref("border-image-source")}} を参照してください。
- `<'border-image-slice'>`
- : source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。
- `<'border-image-width'>`
- : 境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。
- `<'border-image-outset'>`
- : 要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。
- `<'border-image-repeat'>`
- : source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。
## アクセシビリティの考慮
支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。
- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
- [Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Bitmap">ビットマップ</h3>
この例では、要素の境界にダイヤモンド模様を適用します。 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") /* source */
27 / /* slice */
36px 28px 18px 8px / /* width */
18px 14px 9px 4px /* outset */
round; /* repeat */
}
```
#### 結果
{{EmbedLiveSample('Bitmap', '100%', 200)}}
<h3 id="Gradient">グラデーション</h3>
#### 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;
}
```
#### 結果
{{EmbedLiveSample('Gradient')}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("border")}}
- {{cssxref("outline")}}
- {{cssxref("box-shadow")}}
- {{cssxref("background-image")}}
- {{cssxref("url()", "url()")}} 関数
- グラデーション関数: {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}}, {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}}, {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
|
