アウトラインオフセットプロパティ

最終更新：2026-09-13

outline-offset アウトラインオフセットプロパティ

outline-offset は、アウトライン（要素の輪郭線）と要素のボーダー端との距離を制御します。正の値はアウトラインを要素から離して外側へ押し出し、負の値は要素に近づけて内側、あるいは要素の中に引き込みます。通常は outline と組み合わせて、視覚的な効果を調整するために使われます。

カテゴリ
初期値	0
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS3
状態	標準

📝 構文

outline-offset: <length>;

⚙️ 値

値	タイプ	説明
`<length>`	タイプ	アウトラインのオフセット距離

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
outline-offset	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 正のオフセットは、ボタンやカードでフォーカスアウトラインと要素の間に余白（呼吸する空間）を作り、視覚的に分かりやすくするためによく使われます。

❓ よくある質問

Qoutline-offset はレイアウトに影響しますか？

Aいいえ。outline と同様に、outline-offset はレイアウト上のスペースを占有せず、要素のサイズやドキュメントのフローに影響を与えません。アウトラインを要素の内側に引き込む負の値であっても、コンテンツの配置は変わりません。変化するのはアウトラインとボーダー端の距離だけです——正の値は外側へ、負の値は内側へ動かします。

Qoutline-offset は負の値を受け付けますか？

Aはい。負の値はアウトラインを内側へ、場合によっては要素の中へ引き込みます。例えば outline-offset: -3px; とすると、フォーカスアウトラインがボタンの内側の端にぴったり沿います。オフセットがアウトラインをビューポートの外へ押し出した場合、ブラウザはスクロールバーを追加しません。範囲外の部分は単にクリップされます。正と負のオフセットを混ぜると、魅力的な「インセット」風のフォーカススタイルが作れます。

Qoutline と offset を使って二重線（ダブルストローク）効果を作るには？

Aoutline と border を組み合わせます。外側の border: 2px solid #333; と、内側の outline: 2px solid #fff; outline-offset: -6px; を指定します。どちらもレイアウトに影響しないため、2 本の線が重なって二重線の装飾になります。これはカードやボタン、画像フレームでよく使われ、余分な div を入れ子にするよりもすっきりします。