【CSS】border-radiusとborderを使った際の隙間が気になる

CSSでborder-radiusとborderを使った際の見える微妙な隙間が気になる！眠れない！

概要

この記事では、CSSでborder-radiusとborderを使った際の見える微妙な隙間を無くす手順を掲載する。

仕様書

環境

• Google Chrome 99.0.4844.74（Official Build）（64 ビット）

手順書

上は、imgをborder-radiusで円形に切り抜いてborderで縁取ったもの。
よく見るとimgとborderの境界線に1pxにも満たない隙間が生じており、背景が見えて閉まってる。

下は、borderの代わりにoutlineで縁取ったもの。imgとborderの境界線に隙間は無いが、imgの倍率が微妙に違う。

See the Pen
Border Radius 1px Space by 108nen (@108nen)
on CodePen.

解説

outlineを使う場合、outline-offsetで負の数値を入力することでimgの内側を縁取ることができる。outline-offsetに負の数値を入力しないと、borderを使った場合と同様に問題の微妙な隙間が生じてしまう。

まとめ（感想文）

border-radiusとborderの隙間が気になる人は、borderの代わりにoutlineとoutline-offsetを使うと良いかもね！

zzz...