画像罫線（ボーダー）の太さを設定する。

CSS - border-image-width

概要

CSSプロパティ｢border-image-width｣は、ボーダーイメージエリアの上下左右の端から内側への太さ（幅）を四辺それぞれ指定することができます。値を大きくすればするほど内側に領域が広がっていきます。逆に外側に広げる場合は border-image-outset を使用します。

<p>　※border-image-width指定なし</p>
<div class="border-image-1">ボーダーに画像を挿入しています</div>
<p>　※border-image-widthに1emを指定</p>
<div class="border-image-2">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 10px solid #def;
 margin-bottom: 10px;
}
.border-image-1 {
 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;
}
.border-image-2 {
 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;
 border-image-width: 1em;
}
</style>

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

値の指定方法

値は１つから４つ指定することができます。

{ border-image-width: 値（１つから4つ） }

四辺の値について

４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が１つの場合はその値が４辺全てに反映され、２つの値をいれると「上下」、「左右」に反映されます。更には、４つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。

4辺異なった値を入れてみた例です。

<div class="border-image-2">ボーダーに画像を挿入しています</div>
<style>
div {
  border: 10px solid #def;
  margin-bottom: 10px;
}
.border-image-2 {
  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;
  border-image-width: 1em 2em 0.5em 4em;
}
</style>
値 説明
プロパティ名: 5px 「上下左右」に5pxの値を指定します。
プロパティ名: 5px 10px 「上下」に5px、
「左右」に10pxの値を指定します。
プロパティ名: 5px 10px 15px「上」に5px、
「左右」に10px、
「下」に15pxの値を指定します。
プロパティ名: 5px 10px 15px 20px 「上」に5px、
「右」に10px、
「下」に15px、
「左」に20pxの値を指定します。

値について

指定できる値の種類です。

値説明
数値 + 単位 px, em,%など。
数値 のみ 初期値は1（倍）です。n倍と解釈されます。
autoborder-image-sliceと同じ値になる。値が存在しなければ代わりにborder-widthの値が入る。

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

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

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

使用例

指定する幅を変えて、見出しを作成してみます。

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

仕様書

関連CSSプロパティ