ホバーで枠線を出すときは border ではなく box-shadow で描く（周りがずれない）

どんな時に使う？

タグ（チップ）・カード・リスト項目など、横に並んだ要素にホバーやフォーカスで枠を付けたいとき。border は要素のサイズに含まれるため、付けた瞬間に幅と高さが増え、後ろの要素や行の折り返しが1px単位でずれて「ピクッ」と動いて見える。

コード

.chip {
  border-radius: 999px;
  transition: box-shadow 0.15s;
}
.chip:hover {
  /* ぼかし 0・広がり 1px の影 = 1px の枠線 */
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
}

• box-shadow はボックスサイズにもレイアウトにも影響しないので、周りの要素は一切動かない。
• 角丸にも沿って描かれ、transition で色や太さをなめらかに変えられる（border の幅をアニメーションさせるとレイアウトが毎フレーム走る）。
• 線を内側に描きたいときは inset 0 0 0 1px ... にする。

ほかのやり方

• 最初から border: 1px solid transparent を付けておき、ホバーで色だけ変える。サイズが常に同じなのでずれない。
• outline もサイズに含まれない。内側に引き込むなら 白背景の商品画像に outline-offset: -1px で内側の縁取りを付ける と同じ考え方が使える。

注意点・対応状況

• すでに box-shadow で影を付けている要素では上書きになるので、カンマ区切りで枠と影を並べて書く（box-shadow: 0 0 0 1px ..., 0 4px 12px ...）。
• ハイコントラストモード（forced-colors: active）では box-shadow が描かれない。フォーカス表示など見えないと困る線は outline を使う。
• overflow: hidden の親の端にある要素だと、外側の影が切れることがある。その場合は inset にする。

出典

• @nexvyn（2026-11-03）