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

ネコニウム研究所

PCを利用したモノづくりに関連する情報を掲載するブログ

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

2022-3-29 |

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

概要

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

仕様書

環境

  • Google Chrome 99.0.4844.74(Official Build)(64 ビット)

手順書

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

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

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

解説

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

まとめ(感想文)

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

zzz...