border-image-outset:境界線の画像がボーダー・イメージ・エリアの縁からはみ出す距離を指定する

初期値 0
適用対象 全ての要素、::first-letter。ただし、border-collapsecollapseの表を除く。
継承 しない
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

border-image-outsetプロパティの説明

border-image-outsetは、境界線に指定した画像がボーダー・イメージ・エリア(border image area)の縁から外側へはみ出す距離を指定します。ボーダー・イメージ・エリアとは、境界線が描画される専有範囲のことで、境界画像は通常この縁に沿って配置されます。

ここに与えられる値は、あくまで境界線の外周からの距離を示すものであり、要素の大きさやボーダー・イメージ・エリアを広げるものではありません。そのため、画像がはみ出した部分がマウスイベントを受け取ったり、スクロールバーを表示することはありません。

border-image-outsetは、1つから最大で4つの値を持つことができます。1つの値が指定された場合は、4つの辺すべてに適用されます。2つの値が指定された場合は、1つ目の値が上下に、2つ目の値が左右に適用されます。3つの値が指定された場合は、1つ目の値が上に、2つ目の値が左右に、3つ目の値が下に適用されます。そして、4つの値が指定された場合は、時計回りに上、右、下、左の順で適用されます。

境界線に画像を表示させるには、いくつかの下準備が必用になります。全体の流れを確認するには、先にborder-imageの解説を参照して下さい。

  1. border-image-sourceで画像を読み込む
  2. border-image-sliceで画像を素材として扱えるように分割する
  3. border-image-widthで分割された画像を表示する幅が決まる
  4. border-image-outsetで境界線の縁からはみ出す距離が決まる
  5. border-image-repeatで画像の伸縮や並び方が決まる

border-image-outsetに指定できる値

<length>
CSSで使用できる単位つきの長さを表す値です。境界線として表示された画像が、外側へどの程度移動するかを距離で示します。ピクセルやインチなどの絶対値、フォントサイズやビューポートなどを参照する相対値が使えます。負の値は使用できません。
<number>
境界画像がはみ出す距離を、border-widthの倍数で示します。負の値は使用できません。

border-image-outsetの使い方とサンプル

border-image-outsetプロパティの構文は以下の通りです。

CSS
/* <length>値 */
border-image-outset: 10px;
border-image-outset: 1rem;
border-image-outset: 15vmax;

/* <number>値 */
border-image-outset: 1.5;
border-image-outset: 2;

/* 上下 | 左右 */
border-image-outset: 10px 20px;

/* 上 | 左右 | 下 */
border-image-outset: 10px 2 1rem;

/* 上 | 右 | 下 | 左 */
border-image-outset: 5px 10px 15px 20px;

/* グローバル値 */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: unset;

border-image-outsetの実例

それでは実際にborder-image-outsetプロパティの書き方を見ていきましょう。ここでは、30pxのひし形で構成された縦横90pxの画像を使います。

ひし形のサンプル画像

今回は、この画像を境界線に表示させてボーダー・イメージ・エリアからはみ出す表現を確認します。全体の流れを把握したい場合は、先にborder-imageの解説を参照して下さい。

表示確認

単純な<div>を用意し、そこにborderで境界線を与えました。これで境界線が表示される専有幅が得られたことになります。そこにborder-image-sourceで読み込んだ画像を配置し、スライスと繰り返しのパターンを指定すると、上記のように表示されます。

では、ここにborder-image-outsetを追加して、境界画像を外側へはみ出すようにしてみます。

表示確認

ひし形の半分の大きである15pxの移動量を与えました。ここで注目して欲しいのは、要素の大きさや境界線の専有幅を変えずに、装飾の位置のみを変更したことです。この機能により、通常では複数の要素を入れ子にしたり重ねて表示することでしか実現できないデザインが、CSSの数値を変えるだけで可能となるのです。

例えば、画像のスライス位置を変えてひし形を半分に切り取り、境界画像の表示サイズを縮めて縁に並べると、次のような表現ができます。

表示確認

この場合、境界画像として表示されているひし形の切れ端は、完全にボーダー・イメージ・エリアの外部に露出しています。上記の内容では、borderに15pxの境界範囲が指定されていますが、境界線はborder-image-sourceの画像に置き換わっているため表示されません。

このように、border-image-outsetは通常の境界線では難しい表現を可能にします。ただし、この機能を活用するには、境界線に関する各プロパティの役割を理解し、上手く連携させる必用があります。

ぜひ、この内容を活用してオリジナルの境界線を作ってみましょう。

border-image-outsetに関連するCSSプロパティ

境界線・輪郭線
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの装飾を一括で指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインと要素の空間を指定する
outline-style アウトラインの形状を指定する
outline-width アウトラインの太さを指定する