サイト制作に関するメモ書き

HOME > HTML・CSS > borderに画像を指定する

borderに画像を指定する

borderに画像やグラデーションを指定できるborder-imageを使ってみます。

対応ブラウザ

border-imageの対応ブラウザはこちら
IE11から対応していますが、border-styleを上書きするバグやborder-image-repeat: spaceをサポートしていないブラウザなどがあるので注意が必要です。
 

サンプルコード

border-imageは1枚の画像を9分割して、4つの角と辺に使用されます。
今回は以下のようなサイズの画像を用意しました。

実際の画像はこちらです。

HTML

<div class="sample"></div>

CSS

.sample {
	width: 160px;
	height: 110px;
	border-width: 32px;
	border-style: solid;

	border-image-source: url(border.png);
	border-image-slice: 22 32;
	border-image-width: 22px 32px;
	border-image-outset: 0;
	border-image-repeat: repeat;
}

border-imageのデモページ

border-image-source ボーダーに使用する画像やグラデーションを指定。
border-image-slice border-image-sourceの切り分ける位置を指定。
値は数値またはパーセント値で指定。
4つの値を指定した場合はtop,right,bottom,leftに、3つの場合はtop,leftとright,bottomに、2つの場合はtopとbottom,leftとrightに、1つの場合は4つに同じ値が設定される。

中央部分はfillを指定した場合のみ使用される。
border-image-width border-imageの幅を指定。
border-image-outset border-imageの領域を外側に広げる際に指定。
border-image-repeat border-imageの4辺の繰り返し方法を指定。
stretch: 領域のサイズに合わせて画像を引き延ばす。
repeat: 領域のサイズ内で画像を繰り返す。
round: 領域のサイズ内で画像を繰り返す。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整。

 

border-imageプロパティでまとめて指定することもできます。

CSS

.sample {
	width: 160px;
	height: 110px;
	border-width: 32px;
	border-style: solid;

	border-image: url(border.png) 22 32 / 22px 32px repeat;
}

「border-image-sourceの値 border-image-sliceの値 / border-image-widthの値 / border-image-outsetの値 border-image-repeatの値」の順番で指定します。
border-imageのデモページ2
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP