ボーダー
outline
outline は要素の外側に線を描くショートハンドです。border と同じく太さ・線種・色を順不同で書けますが、レイアウトには影響しません。
構文
<line-width> || [ auto | <outline-line-style> ] || [ auto | <color> ]プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
outline4pxoutline-width
solidoutline-style
#4a86cboutline-color
コード
.box {
outline-offset: 6px;
outline: 4px solid #4a86cb;
}コントロール
outline-width4px
outline-stylesolid
outline-color#4a86cb
解説
border との違い
- 場所をとりません。太くしても要素のサイズや周りの位置は変わらず、隣の要素に重なって描かれます。
- 辺ごとに変えられません。4 辺すべてが同じ線になります。
outline-offsetで枠から離して描けます。負の値にすると内側に入り込みます。このページのプレビューでは見やすいように6px離しています。- 最近のブラウザでは
border-radiusの角丸に沿って描かれます。
省略したパーツ
outline-style を省略すると none になり、線は表示されません。outline-color を省略すると auto になり、ふつうは文字色（currentcolor）で描かれます。
auto とフォーカスリング
線種の auto は、ブラウザ標準のフォーカスリングと同じ見た目で描きます。outline はキーボード操作でのフォーカス表示に使われるので、outline: none で消すときは、:focus-visible に代わりのスタイルを必ず用意しましょう。