CSS - border-image

トップ > CSSリファレンス > border-image

概要

属性名 border-image
<source> || <slice> [ / <width> | / <width>? / <outset>]? || <repeat>
初期値個々の属性を参照
適用可能要素個々の属性を参照
継承継承しない
メディアvisual
アニメーション個々の属性を参照

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3113.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 を参照してください。

使用例

画像(border-image.png)
border-image
CSS
#d1 {
  width: 120px;
  height: 60px;
  border-image: url(./image/border-image.png) 10 / 10px round;
}
HTML
<div id="d1"></div>
表示

上記の例では、border-image に下記の値を指定しています。

border-image: <source> <slice> / <width> <repeat>
◆ border-image-source

border-image-source で下記の画像を指定しています。この例では 1辺が 30px の画像を使用しています。

border-image: url(./image/border-image.png) 10 / 10px repeat;

border-image

◆ border-image-slice

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 の横幅をピクセル単位、またはパーセンテージで示します。

border-image

また、ボーダーイメージを表示する領域も下記の様に 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

border-image-width は、枠線(@1, @2, @3, @4, @6, @7, @8, @9)の太さを指定します。

border-image: url(./image/border-image.png) 10 / 16px round;
◆ border-image-repeat

border-image-repeatroundrepeat を指定すると、領域 @2, @4, @6, @8 に 画像 #2, #4, #6, #8 を繰り返して表示します。repeat は単純繰り返し、round は繰り返し回数が整数になるように自動調整します。

border-image: url(./image/border-image.png) 10 / 10px round;

関連項目

border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat

リンク


Copyright (C) 2015-2016 杜甫々
初版:2015年10月11日、最終更新:2016年1月3日
http://www.tohoho-web.com/css/prop/border-image.htm