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

CSS - border-image-outset

概要

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

<p>　※border-image-outset指定なし</p>
<div class="border-image-1">ボーダーに画像を挿入しています</div>
<p>　※border-image-outsetに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-outset: 1em;
}
</style>

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

値の指定方法

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

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

四辺の値について

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

4辺異なった値を入れてみた例です。要素には背景色をつけており、おおきな値を指定したところほど、距離が離れていることがわかります。

<div class="border-image-2">ボーダーに画像を挿入しています</div>
<style>
div {
  background: #ddd;
  border: 10px solid #def;
  margin: 20px auto;
  width: 200px;
}
.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-outset: 20px 30px 50px 10px;
}
</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-outset｣ プロパティは、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: 0 auto;
  width: 250px;
}
.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-outset: 1 2 10em 10px;
}
</style>

仕様書

関連CSSプロパティ