Title

border-image-outsetとは

ここで説明するborder-image-outset とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界、境界線、国境、縁

image

読み: イメージ
意味: 画像、映像

outset

読み: アウトセット
意味: 着手、手始め、発端、発生

目次に戻る

border-image-outsetプロパティの概要

このプロパティは要素の境界線に画像を使用した場合に、画像が境界ボックスからはみ出す幅を指定することができます。

border-image-outsetは個別プロパティであり、一括指定プロパティのborder-imageのグループです。 同種の個別プロパティとの設定の組み合わせによっては、色々な画像をボーダー領域に利用することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-image-outset: 四辺値}
セレクター{border-image-outset: 上下辺値 左右辺値}
セレクター{border-image-outset: 上辺値 左右辺値 下辺値}
セレクター{border-image-outset: 上辺値 右辺値 下辺値 左辺値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使う要素はdiv要素です。この要素の境界線に次に表示している画像を使ってボーダーイメージを適用していきます。

この画像は透過処理をおこなったpng形式のファイルです。画像サイズは60pxの正方形であり、20pxの正方形を九つ配置しています。

初期値: 0

初期値の0は、 ボーダー領域の画像はボーダーラインの内側に収まるように表示されます。

div{
	border-width: 1px;
	border-image-source: url(URL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-outset: 0;
}

目次に戻る

数値: 単位値ではみ出す幅を指定する

ボーダーラインの外側に画像をオフセットするために 絶対単位値と相対単位値を指定することができます。 このプロパティでは負の数値とパーセンテージ値は使えません。

div{
	border-width: 1px;
	border-image-source: url(URL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-outset: 10px;
}

目次に戻る

数値: 実数値ではみ出す幅を指定する

ボーダーラインの外側に画像をオフセットするために 単位のない実数値を指定することができます。 このプロパティでは負の数値は使えません。

実数値を指定すると border-width で指定している値の倍数をこのプロパティに指定したことになります。

ここではborder-widthに1pxを指定していることから、1px×10でborder-image-outsetは10pxとなります。

div{
	border-width: 1px;
	border-image-source: url(URL);
	border-image-width: auto;
	border-image-slice: 33.4%;
	border-image-outset: 10;
}

目次に戻る

グローバル値

border-image-outsetプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-image-outset: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能。ただし、table要素の場合border-collapseがcollapseのときはテーブル要素内部には不適用
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-image-outset: 0;

border-image-outset: 10px;

border-image-outset: 20;

border-image-outset: 8mm;

目次に戻る