⛳

[HTML/CSS]ボーダーの外側に背景色を追加したい場合

2021/10/18に公開

はじめに

本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご連絡いただけますと幸いです。

outlineとoutline-offsetを記述する。

outline: 5px solid orange; // 輪郭線の設定
outline-offset: -10px; // 輪郭線と要素の空間を設定する。マイナスだと内側、プラスだと外側に線が表示される。

左側がborderで、右側がoutline

borderは要素の一部として「border」が設定されており、
その外側で余白をつけたいと思ってもつけることができません。

outlineは要素として認識されず、
outline-offsetを設定することで線の場所を移動させることができます。

outline-offset: -10px;

outline-offset: 0;

outline-offset: 10px;