ボーダー

outline-offset

outline-offset は、outline を要素の border の外側の縁からどれだけ離して描くかを指定します。負の値にすると、要素の内側に入り込んで描かれます。

構文

<length>

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  border: 6px solid #88d1c7;
  outline: 4px solid #4a86cb;
  outline-offset: 12px;
}

outline-offset12px

初期値の 0 では、outline は border のすぐ外側に接して描かれます。正の値でそこから外へ離れ、負の値で border や padding の上に重なるように内側へ入ります。% は使えず、長さだけを書きます。

outline と同じくレイアウトには影響しません。大きく離しても要素の大きさや周りの位置は変わらず、隣の要素の上に重なって描かれます。

キーボード操作で選ばれた要素に付けるフォーカスの線を、少し離して見やすくするのによく使います（:focus-visible { outline: 2px solid; outline-offset: 2px }）。ボタンのように背景色のある要素でも、線と要素の間にすき間ができるので目立ちます。

outline ショートハンドには含まれません。位置は見た目と別に指定できるように分けられているので、outline を書き直しても outline-offset はそのまま残ります。
負の値を大きくしても、outline の外形の幅と高さは outline の太さの 2 倍より小さくならないよう、ブラウザが調整します（仕様では「すべき」とされています）。
このページのプレビューでは、4px の outline のほかに、測り始める位置がわかるよう 6px の border を付けています。