要素の周囲に輪郭線を描画するプロパティです。borderと似ていますが、レイアウトに影響しません。フォーカス時の視覚フィードバックに使用され、アクセシビリティの観点から重要です。
outline: <outline-width> <outline-style> <outline-color>| outline-2 | outline-width: 2px |
| outline-offset-2 | outline-offset: 2px |
| outline-hidden | 不可視アウトライン（forced-colors時のみ表示） |
| outline-none | outline-style: none |
v4で旧outline-noneはoutline-hiddenに改名。新しいoutline-noneは本当にoutlineを消すので、フォーカスリングの代替を必ず用意する。
outline: 2px solid blue;青色の2px実線アウトライン
outline: 3px dashed red;赤色の3px破線アウトライン
outline: none;アウトラインを無効化（アクセシビリティ注意）
outline-offset: 5px;アウトラインと要素の間に5pxの隙間
フォーカス状態の表示に使われる。borderと違いレイアウトに影響しない。outline: none;を使う場合は代替のフォーカススタイルを必ず用意する。
outline: none;でフォーカス表示を消すとアクセシビリティ問題。代わりに独自のフォーカススタイルを実装する。outline-offsetで位置調整可能。
outlineはレイアウトに影響しない（スペースを取らない）点がborderとの本質的な違いで、フォーカス表示に使われる理由です。outline: noneでフォーカスを消すのは禁じ手で、消したいならoutline-offsetや色の調整で「見やすくする」方向へ。border-radiusに追従する（現在は角丸に沿う）ようになった点はAIの知識が古いことがあります。
フォーカスリングをブランドに合わせて調整して。消さずにoutline-offsetと色で見やすく
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
outline自体は全ブラウザで古くから利用可能。記載バージョンは角丸への追従など仕様準拠が完成した時点