Title

border-image-widthとは

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

border

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

image

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

width

読み: ウィズ
意味: 幅

目次に戻る

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

このプロパティは要素の境界線に使われる画像の幅を指定します。

要素の境界線に画像を使用する場合は border-image-source プロパティで指定します。

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

このプロパティを使う上での注意点として、 border-width プロパティの値よりもborder-image-widthプロパティの値が上回っている場合、 画像は パディング 領域やコンテンツ領域に拡張されるのでコンテンツの表示の妨げになる可能性があります。

目次に戻る

構文

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

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

目次に戻る

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

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

サンプルに使う要素はdiv要素です。この要素の境界線に次に表示している画像を使ってボーダーイメージを適用していきます。 この画像は透過処理をおこなったpng形式のファイルです。画像サイズは60pxの正方形であり、20pxの正方形を九つ配置しています。

初期値: 1

初期値の1は border-width で指定した値で境界線の画像幅を指定します。

この方法は倍率指定の方法であり、border-widthの値×1で計算された値がborder-image-widthの値になります。 次のセクションで倍率指定のサンプルを掲載します。

div{
	border-width: 1px;
	border-image-width: 1;
}

目次に戻る

数値: 倍率で境界線の画像幅を指定する

倍率値の指定方法は初期値のセクションのところでも述べましたが、 実際のサンプルを見ていただきたいと思います。

指定した倍率値は border-widthで設定されている値に乗算されて 結果を返します。

このサンプルの場合、border-widthで1pxを設定しているのでborder-image-widthで10を指定すると10pxを指定したことになります。 また20を指定すると20pxを指定したことになります。 つまり、「border-widthの値」×「倍率値」＝「ボーダーイメージの幅」ということになります。

div{
	border-width: 1px;			
	border-image-width: 20;
	border-image-slice: 20;
	border-image-repeat: round;
}

目次に戻る

キーワード値: auto

autoキーワードは、 border-image-slice プロパティの値と等しい値を設定します。 もし、その値がなければborder-widthの値が使用されます。

div{
	border-width: 1px;			
	border-image-width: auto;
	border-image-slice: 10;
	border-image-repeat: round;
}

div{
border-width: 1px;			
border-image-width: auto;
border-image-slice: 20;
border-image-repeat: round;
}

目次に戻る

数値: 単位付き数値で境界線画像の幅を指定する

境界線に使われる画像の幅は単位付きの数値で指定することが可能です。

このサンプルではpxを単位として使用しています。

div{
border-width: 1px;			
border-image-width: 15px;
border-image-slice: 20;
border-image-repeat: round;
}

目次に戻る

数値: パーセンテージ値で境界線画像の幅を指定する

境界線に使われる画像の幅はパーセンテージ値で指定することが可能です。 この場合要素の横と縦の幅を基準として境界線の画像幅が計算されます。

div{
border-width: 1px;			
border-image-width: 10%;
border-image-slice: 20;
border-image-repeat: round;
}

目次に戻る

グローバル値

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

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

border-image-width: 1;

border-image-width: 10;

border-image-width: auto;

border-image-width: 15px;

border-image-width: 5%;

border-image-width: 10 20;

border-image-width: 20 10;

目次に戻る