画像を囲うボーダーの色を半透明にしてコンテンツに馴染みやすくする

CSSのborderプロパティに半透明の色を指定すると、ボーダーが透過してその背景と合成される。

button {
  border: 2px solid oklch(0 0 0 / 0.25);
  background-color: rebeccapurple;
}

ボーダーの色はその背景に応じたものになり、単なる不透明なグレーを使うよりも馴染んで見えるようになる。背景が単色であれば、必ずしも半透明でなくても個別に調整した色を使うことができるが、特に画像やグラデーションが用いられている場合はこの手法が効果的である。

しかしimg要素を使う場合、borderプロパティでは同様の効果を実現できない。img要素のボーダーは画像の外側に描画されるが、前述の効果を実現するには、画像の上に覆い被さるように位置していなければならないからだ。box-shadowプロパティとinsetキーワードを使ってボーダーを描画する手法もあるが、画像の後ろ側に隠れてしまう。

そこで、代わりにoutlineプロパティを使う。通常は要素の外側に描画されるが、outline-offsetプロパティで内側に移動させれば、画像の上にボーダーを重ねることができる。ラッパー要素などは不要だ。

img {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

このようにして画像を半透明なボーダーで囲うと、ただ画像に馴染んで見えるだけではなく、不要なときには目立たなくなることも大きなメリットだ。

というのも画像の周囲のボーダーは、画像と背景を同化させずに際立たせるためのものであり、たとえば白背景のページに白い画像を配置するときに境界線として機能させることを目的としている。一方黒い画像を使う場合、その画像があるだけで境界は明らかなので、ボーダーは必要ない。ところがCSSで一律ボーダーを適用していると、そのような区別がなく、不要なものにもボーダーが付与されて不恰好に見えることがよくある。

だが半透明なボーダーであれば、黒い画像には同化して目立たなくなる。より正確に言えば、そのボーダーに近い色の画像と重なり合うと、ということだ。だからもし逆に、黒い背景に白い半透明なボーダーが使われていれば、白い画像に同化する。

こうした仕組みによって、冗長にならない場合にのみボーダーが「見える」ことになる。