CSSリファレンス

実践向けCSSリファレンス

画像ボーダーの繰り返し方法を設定する border-image-repeat

概要

CSSプロパティ「border-image-repeat」は、画像ボーダーの繰り返し方法を指定することができます。

<div class="border-image-repeat">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 10px solid #def;
 margin-bottom: 10px;
}
.border-image-repeat {
 border-image-slice: 24;
 border-image-source: url("http://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
 border-image-repeat: repeat;
}
</style>

またこれらをまとめて指定する場合は border-image プロパティを使用します。

値の指定方法

値は1つか2つ指定することができます。2つ渡すと、1つ目は縦方向、2つ目が横方向への指定となります。

{ border-image-repeat: 値(1つまたは2つ) }

値について

指定できる値の種類と、実際の表示です。

説明
stretch領域が埋まるように画像が引き延ばされます
repeat領域が埋まるように画像が繰り返されます
round領域が埋まるように画像が繰り返されますが、整数回で並ばない場合は自動的に調整されます
space領域が埋まるように画像が繰り返されますが、整数回で並ばない場合は画像の間に空白を追加します
<div class="border-image stretch">stretchを指定</div>
<div class="border-image repeat">repeatを指定</div>
<div class="border-image round">roundを指定</div>
<div class="border-image space">spaceを指定</div>
<style>
div {
 border: 10px solid #def;
 margin-bottom: 10px;
}
.border-image {
 border-image-slice: 24;
 border-image-source: url("http://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
}
.stretch {
  border-image-repeat: stretch;
}
.repeat {
  border-image-repeat: repeat;
}
.round {
  border-image-repeat: round;
}
.space {
  border-image-repeat: space;
}
</style>

プロパティの種類について

「border-image-repeat」 プロパティは、border-image を細分化したプロパティです。こちらの一覧で全体を確認しておきましょう。

プロパティ名説明
border-image-source画像の参照元を指定する
border-image-slice画像のボーダー使用範囲を指定する
border-image-repeat画像ボーダーの繰り返しを指定する
border-image-width画像ボーダーの太さ(内側に向かう)を指定する
border-image-outset画像ボーダーイメージエリア(外側に向かう)を指定する

仕様書

関連CSSプロパティ

閉じる