<length>ずらす距離
pxやremなどの長さで指定します。%は使わず、負の長さも指定できます。
outline-offset
要素のborderとoutlineの間に、透明な間隔をつくるプロパティ。負の値から正の値まで動かし、外枠の位置だけが変わる様子を確かめます。
CSSのoutline-offsetとは？
負の値・0・正の値をライブプレビューで変えながら、borderとoutlineの間隔、フォーカス表示、レイアウトへの影響を初学者向けに解説します。
遊んでみよう
固定されたレールの間で外枠だけを移動
border透明な間隔
CSS
.element outline-offset: 0px;
値のパターン
outline-offsetの構成要素
border edge位置を測る基準
0ではoutlineがborderの辺へ密着し、正の値では外側へ離れます。
outline動かす外枠
outline自体の太さ・線種・色はoutlineプロパティで別に用意します。
早見表
初期値は0です。正の値で外側へ離し、負の値でborder boxの内側方向へ寄せます。
01
-8px外枠を内側方向へ寄せる負の値02
0borderの辺へ密着させる初期値03
2pxフォーカスリングを少し離す基本04
4pxborderとの違いを見やすくする強調05
12px外枠を大きく外側へ離す広い間隔06
0.25rem文字サイズを基準に間隔を決める相対長よくある使い方
01
ボタンのフォーカスリングを離す
outlineをborderから少し離し、キーボード操作中の位置を見分けやすくします。
.button:focus-visible { outline: 3px solid #7258e8; outline-offset: 3px; }02
カードの選択状態を外側へ示す
カードの寸法を変えずに外枠を離し、borderとは別の選択状態を見せます。
.card[aria-selected="true"] { outline: 3px solid #0f735f; outline-offset: 4px; }03
狭い領域で外枠を内側へ寄せる
外側の空間が少ないときは負の値を使えますが、内容やborderを隠さないか確認します。
.compact:focus-visible { outline: 3px dashed #d9472b; outline-offset: -6px; }ポイント
outlineを用意してから、間隔を動かす。
outline-offsetだけでは外枠は現れないため、outline-styleがnoneではないoutlineを別に指定します。初期値は0で、すべての要素に適用でき、子要素へは継承されません。値は長さで、正の値はborderの辺から外側へ離し、負の値はoutlineをborder boxの内側方向へ縮めます。間の領域は透明で、outlineと同じく要素の幅や高さ、周囲の配置は変えません。そのため、大きな正の値では近くの内容へ重なることがあります。outline一括指定にはoutline-offsetが含まれないため、独立した宣言として書きます。フォーカス表示に使う場合は、背景とのコントラストと見切れも確認します。
関連するCSSも見てみよう。
outline-offset と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。