CSS - border-image

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

概要

属性名	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

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

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

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

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

関連項目

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

リンク

• http://www.w3.org/TR/css3-background/#the-border-image
• https://developer.mozilla.org/ja/docs/Web/CSS/border-image
• http://caniuse.com/#feat=border-image

---