| 属性名 | border-image |
|---|---|
| 値 | <source> || <slice> [ / <width> | / <width>? / <outset>]? || <repeat> |
| 初期値 | 個々の属性を参照 |
| 適用可能要素 | 個々の属性を参照 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 個々の属性を参照 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 11 | 3.5(-moz) 15 | 4(-webkit) 16 | 11.5(-o) 15 | 3.1(-webkit) 6 |
画像を用いたボーダーを表示します。
| 値 | 説明 |
|---|---|
| <source> | 画像のURLを指定します。詳細は border-image-source を参照してください。 |
| <slice> | 画像のスライス方法を指定します。詳細は border-image-slice を参照してください。 |
| <width> | 画像の幅を指定します。詳細は border-image-width を参照してください。 |
| <outset> | 画像の領域を指定します。詳細は border-image-outset を参照してください。 |
| <repeat> | 画像の繰り返し方法を指定します。詳細は border-image-repeat を参照してください。 |
下記の画像を使用します。
<source> に url(...) を、<slice> に 10 を、<width> に 10px を、<repeat> に round を指定します。
#d1 {
width: 120px;
height: 60px;
border-image: url(./image/border-image.png) 10 / 10px round;
border-style: solid;
}
<div id="d1"></div>
border-image-source で下記の画像を指定しています。この例では 1辺が 30px の画像を使用しています。
border-image: url(./image/border-image.png) 10 / 10px repeat;
border-image-slice は、上記の画像を下記の 9個の領域に分割する際の高さや幅を指定します。
| #1 | #2 | #3 |
| #4 | #5 | #6 |
| #7 | #8 | #9 |
border-image-slice: <top> <right> <bottom> <left>; border-image-slice: <top> <right_left> <bottom>; border-image-slice: <top_bottom> <right_left>; border-image-slice: <top_right_bottom_left>;
top は #1, #2, #3 の高さ、right は #3, #6, #9 の横幅、bottom は #7, #8, #9 の高さ、left は #1, #4, #7 の横幅をピクセル単位、またはパーセンテージで示します。
また、ボーダーイメージを表示する領域も下記の様に 9個の領域に分割します。
| @1 | @2 | @3 |
| @4 | @5 | @6 |
| @7 | @8 | @9 |
上記で 9分割した #1～#9 の画像の内、四隅の #1, #3, #7, #9 の画像を @1, @3, @7, @9 に、枠線部の #2, #4, #6, #8 の画像を @2, @4, @6, @8 に表示します。
border-image: url(./image/border-image.png) 10 / 10px; border-image: url(./image/border-image.png) 10 10 / 10px; border-image: url(./image/border-image.png) 10 10 10 / 10px; border-image: url(./image/border-image.png) 10 10 10 10 / 10px;
fill を指定すると @5 の領域にも画像 #5 を表示します。
border-image: url(./image/border-image.png) 10 fill / 10px;
border-image-width は、枠線(@1, @2, @3, @4, @6, @7, @8, @9)の太さを指定します。
border-image: url(./image/border-image.png) 10 / 16px round;
border-image-repeat で round や repeat を指定すると、領域 @2, @4, @6, @8 に 画像 #2, #4, #6, #8 を繰り返して表示します。repeat は単純繰り返し、round は繰り返し回数が整数倍になるように自動調整します。
border-image: url(./image/border-image.png) 10 / 10px repeat; border-image: url(./image/border-image.png) 10 / 10px round;