【CSS】同じ背景色の要素の境界線に出る白い線を消す方法

ある日コーディングをしている中で、要素同士が隣接する境界線で白い線が出る現象に悩まされたのでその解決方法を提示します。

白い線が出現する現象

今回の現象は、PCで普通に表示する分には出てくることはなかったのですが、画面を拡大したりデベロッパーツールを利用するときに現れました。

もしかすると、デバイス環境によっては出ない可能性もありますが、少なくとも私の環境のMac（macOS Monterey）では確認できました。

上の画像を見てもらうと、３つのブロックの境界線にうっすら白い線が入っているのが確認できるかと思います。

PC表示で白い線は確認できませんでした。

ちなみにHTMLはこんな感じです。

<h1>謎の境界線</h1>
<ul class="list">
  <li class="list__item"></li>
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

白い境界線を消す方法

白い境界線自体を消すことは出来ないので、要素の背景色と同じ色のbox-shadowを被せて見えなくする方法で対応します。

解説上必要なコードのみ記述しています。

.list__item {
  background-color: #0187af;
  box-shadow: 1px 0 0 #0187af; /* x軸方向に背景色と同じ色の影をつくる */
}

このようにx軸方向に1pxだけ背景色と同じ色の影をつくることで、白い線が見えなくなります。

逆にx軸方向に-1pxでも同じように見えなくなります。

/* ブロックの親要素 */

.list {
  overflow: hidden; /* 親要素からはみ出ないように */
}

影をつくった分だけ親要素から横にはみ出てしまうので、はみ出さないよう親要素にoverflow: hidden;をつけてあげます。

まとめ

以上の手順で無事解決できるかと思います。

結構マイナーな現象かとは思いますが、私のように悩んでる方もいるかと思うので少しでもお役に立てられたら嬉しいです。