画像の内側に線を入れる方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約3分

画像の周りに枠線を付けたい時、普通にborderを指定すると枠線の分だけ画像の外側にサイズがはみ出してしまい、レイアウトの計算が狂うことがあります。画像のサイズを変えずに、内側に線を入れたい時の書き方を紹介します。

目次非表示

box-shadowのinsetキーワードを使う
border-box(box-sizing)を使う選択肢もある
まとめ

box-shadowのinsetキーワードを使う

box-shadowプロパティにinsetを指定すると、影ではなく「内側に食い込む線」として表示できます。ぼかし半径を0にすれば、線としてくっきり表示されます。

img {
  box-shadow: inset 0 0 0 3px #ffffff;
}

数値の意味は「横方向のずれ、縦方向のずれ、ぼかし半径、線の太さ、色」の順です。ぼかし半径を0にし、太さの数値で線の幅を調整します。borderと違って要素の外寸(width・height)には一切影響しないため、グリッドレイアウトの中でサイズをきっちり揃えたい画像に最適です。

border-box(box-sizing)を使う選択肢もある

もう1つの方法として、box-sizing: border-box;を指定した上で通常のborderを使う手もあります。これを指定すると、borderで指定した太さの分はwidthの内側に含まれて計算されるようになるため、要素全体のサイズは変わらず、見た目としては内側に線が入ったのと同じ結果になります。

img {
  box-sizing: border-box;
  border: 3px solid #ffffff;
}

💡 どちらを使うべきか

すでにサイト全体で* { box-sizing: border-box; }のようなリセットCSSを適用済みなら、シンプルなborderで問題ありません。一方、リセットが入っていないプロジェクトや、その要素だけ手早くピンポイントで対応したい場合はbox-shadow: inset;の方が、他のスタイルへの影響を気にせず使えて安全です。