CSS - border-image-repeat

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

概要

属性名 border-image-repeat
[ stretch | repeat | round | space ]{1,2}
初期値stretch
適用可能要素border-collapse が collapse と設定されたテーブル以外のすべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3111516156

説明

ボーダーイメージの枠線部の繰り返し方法を指定します。

説明
stretch画像を引き延ばして表示します。
repeat画像を繰り返して表示します。
round画像を繰り返して表示します。画像の個数が整数となるよう画像のサイズが調整されます。
space画像を繰り返して表示します。画像の個数が整数となるよう画像と画像の間に空白が表示されます。

border-image-repeat に値を2つ指定した場合、横方向の枠線と、縦方向の枠線を指定したとみなされます。1つ指定した場合は両方の枠線を指定したとみなされます。

文法
border-image-repeat: <horizontal> <vertical>
border-image-repeat: <horizontal_vertical>

使用例

CSS
#d1 {
  width: 120px;
  height: 62px;
  border-image-source: url(./image/border-image.png);
  border-image-slice: 10;
  border-image-width: 10px;
  border-image-repeat: round;
  border-style: solid;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
HTML
<div id="d1"></div>
表示

stretch, repeat, round, space の差異を下記に示します。space はまだサポートしているブラウザは少ないようです。

表示
stretch
repeat
round
space

関連項目

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

リンク


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