box-shadowをborderの代わりに使用する

デザインで装飾された要素の縁取りをコーディングするということが度々ありますが、borderの実装手段の一つとしてbox-shadowを使う方法を試してみます。

サンプルコード

まずは基本的な使い方を試してみます。

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

.sample {
	box-shadow: 0 0 0 2px red;
}

box-shadowで設定している値ですが、1つ目から順にX軸の距離、Y軸の距離、ぼかしの大きさ、拡張する大きさ、影の色になります。
この例の場合、1～3つ目を0にして4つ目にborderの太さを設定することで、borderの代わりになるようにしています。
box-shadowのデモページ

カンマ区切りで複数の影を設定できるので、複数のborderを設定することもできます。

.sample {
	box-shadow:
		0 0 0 3px red,
		0 0 0 6px blue,
		0 0 0 9px orange;
}

複数指定の場合、最初に指定した内容が最前になります。
box-shadowの複数指定のデモページ

border-radiusで要素を角丸にした場合も問題ありません。

.sample {
	border-radius: 50%;
	box-shadow:
		0 0 0 3px red,
		0 0 0 6px blue,
		0 0 0 9px orange;
}

角丸の場合のデモページ

box-shadowは要素の外に表示されるため、borderと幅や高さの算出方法が異なります。
要素内に含めたい場合はinsetを合わせて設定します。

.sample {
	box-shadow:
		0 0 0 3px orange inset,
		0 0 0 6px blue inset,
		0 0 0 9px red inset;
}

insetで内側に表示にした場合、外側に設定する場合と順番が変わる(上記の場合、最初の指定が外側のボーダーになる)ので注意が必要です。
内側表示にするデモページ

ここまではbox-shadowの4つ目の値でborderの設定を行いましたが、X軸とY軸の距離を使って左上・右上・右下・左下にそれぞれ設定することでもborderの設定ができます。

.sample {
	box-shadow:
		-3px -3px red,
		3px -3px red,
		3px 3px red,
		-3px 3px red;
}

1つのborderを設定するのみであれば最初の方法の方が簡易に設定できますが、一部の色を変えたいなど元のデザインや場合によってはこの方法の方がよいこともあります。
4方向に設定するデモページ

補足として、左上・右上・右下・左下への指定ではなく、上・右・下・左への指定とすると4隅にborderが届かないようになります。

.sample {
	box-shadow:
		0 -3px red,
		3px 0 red,
		0 3px red,
		-3px 0 red;
}

4方向に設定するデモページ2