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

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("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
 border-image-repeat: repeat;
}
</style>

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

値の指定方法

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

{ border-image-repeat: 値（１つまたは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("https://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プロパティ