outline-width外枠の太さ
0以上の長さか、thin・medium・thickのキーワードで指定します。
outline
要素のborderより外側へ、レイアウトを動かさずに外枠を描くプロパティ。太さ・線のかたち・色を組み合わせ、フォーカス位置を見やすくします。
CSSのoutlineとは？
外枠の太さ・線種・色をライブプレビューで変えながら、borderとの違い、フォーカス表示、アクセシビリティを初学者向けに解説します。
遊んでみよう
内側：border ／ 外側：outline
要素の外寸は変わりませんoutline
CSS
.element outline: 4px solid #7258e8;
値のパターン
outlineの構成要素
outline-style外枠の線種
solidやdashed、autoなどから線の見た目を選びます。
outline-color外枠の色
色を省略すると、通常はcurrentColorをもとに描かれます。
早見表
3つの値は順不同で書けます。初学者は「太さ・線種・色」の順にそろえると読みやすくなります。
01
4px solid #7258e8太さ・線種・色をまとめて指定する基本02
3px dashed #d9472b破線の外枠で強調する破線03
thick double #0f735f太い2本線の外枠を描く2本線04
autoフォーカスに適した見た目をブラウザーへ任せる自動05
none外枠を表示しない非表示06
outline-offset: 4px別プロパティでborderとの間隔を空ける関連よくある使い方
01
キーボードフォーカスを見やすくする
フォーカスできる要素へ太く見分けやすい外枠をつけ、現在位置を示します。
.button:focus-visible { outline: 4px solid #7258e8; }02
入力欄をレイアウト変更なしで強調する
outlineは空間を取らないため、入力欄の幅を変えずに操作中の項目を囲めます。
.field:focus { outline: 3px solid #0f735f; }03
入力エラーを線種と色で示す
色だけに頼らず破線も組み合わせると、入力エラーの領域を見分けやすくできます。
.field[aria-invalid="true"] { outline: 3px dashed #d9472b; }ポイント
フォーカスのoutlineは、代わりを用意せず消さない。
outlineはoutline-width・outline-style・outline-colorの一括指定で、すべての要素に適用でき、子要素へは継承されません。各構成要素の初期値はmedium・none・autoなので、初期状態では線が見えません。outlineはborderの外側へ描かれ、要素や周囲の箱の位置・大きさを変えませんが、近くの内容へ重なることがあります。4辺は常に同じ見た目で、辺ごとのoutlineプロパティはありません。outline-offsetは間隔を変える別プロパティです。操作できる要素でoutline: noneや0を使う場合は、同等以上に分かりやすいフォーカス表示を必ず用意します。
関連するCSSも見てみよう。
outline と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。