ウェブ上に画像を掲載する際、画像と背景との境界をハッキリさせたい場合などで、画像の周囲に枠線を付加したいと思うことがあります。そのとき、画像にぴったり接するように枠線を付加したい場合もあれば、一定の距離を空けた位置に(画像と枠線との間に空白を挟む形で)枠線を引きたい場合もあるでしょう。そのどちらの場合も、わざわざ画像を加工する必要なく、スタイルシートだけで実現できます。

例えば、下記のような川の写真の周囲に枠線を引きたい場合を例にして説明します。

■画像の周囲に枠線を引く3パターンの方法《目次》

• 画像の周囲ぴったりに枠線を引く方法
• 画像の周囲に一定の余白を設けて枠線を引く方法
• 画像の周囲に、異なる色で二重の枠線を引く方法

画像の周囲ぴったりに枠線を引く方法

画像の周囲ぴったりの位置に枠線を引いた例は以下の通りです。

これを実現する方法はとても簡単で、以下のようにCSSソースを記述するだけです。

img {
	border: 9px solid #00cc00;
}

画像を表示するimg要素に対して、枠線を引くためのborderプロパティを指定するだけです。

画像の周囲に一定の余白を設けて枠線を引く方法

画像の周囲に、一定の空白を空けて枠線を引く例は以下の通りです。

これを実現する方法もとても簡単で、以下のようにCSSソースを記述するだけです。

img {
	padding: 5px;
	border: 9px solid green;
}

画像を表示するimg要素に対して、内側の余白を指定するpaddingプロパティに適当な値(上記では5px)を指定した上で、borderプロパティを使って枠線を引けば良いだけです。

画像の周囲に、異なる色で二重の枠線を引く方法

画像の周囲に一定の空白を空けて枠線を引く方法を使うと、色の異なる二重の枠線を引くこともできます。

これを実現する方法もとても簡単で、以下のようにCSSソースを記述するだけです。

img {
	padding: 9px;
	border: 9px solid green;
	background-color: yellow;
}

画像を表示するimg要素に対して、内側の余白を指定するpaddingプロパティに適当な値(上記では5px)を指定した上で、borderプロパティを使って枠線を引いているのは先程と同じですが、ここではさらにbackground-colorプロパティを使って背景色を付加しています。

padding(内側の余白)部分は「背景色が塗られる領域内」なので、画像自身と枠線との間に別の枠線があるように見えます。上記では、緑色と黄色の2つの枠線が引かれているように見えるでしょう。

※画像に透過色が含まれている場合は、その部分に背景色が見えてしまうので「二重線」のようには見えません。

備考：枠線と画像の四隅を丸くする

上記のように枠線を加えた上で、枠線の四隅を丸くすれば、画像の角も合わせて丸くなります。

このように枠線ごと画像の四隅を丸くする方法は、別の記事「画像の四隅(角)を丸くする方法」で解説しています。

■関連記事：

• レイアウトに一切影響を与えずに枠線が引けるoutlineプロパティで、動的に枠線を表示
• 画像の四隅(角)を丸くする方法
• 画像を円形にくり抜く方法

《2016/04/02 11:02 初版公開》

(更新日：2016年04月02日)