アウトライン(輪郭線)の表示位置を設定する

CSS - outline-offset

概要

CSSプロパティ「outline-offset」は、outline プロパティで指定したアウトライン(輪郭線)のオフセット値を指定するのに使用します。オフセットとは、基準点からの距離の値のことです。初期値は0で、要素のすぐ外側に表示されます。また、要素とそのアウトラインの間のスペースは透明になります。

<p>初期値のアウトライン</p>
<p class="outline-offset">要素から5px離れた位置にアウトラインが表示されます</p>
<style>
p {
  width: 300px;
  margin: 0 auto 20px;
  background: #def;
  outline: solid;
}
.outline-offset {
  outline-offset: 5px;
} 
</style>

指定可能な値は以下の通りです。

説明
value単位はpx, %, emなどが可能です。マイナス値は入れられません

使用例

テキストエリアをクリックすると、テキストエリアから5px離れた位置にアウトラインが表示されます。

<div>リスト1:<input type="text" class="outline-offset" id="item1"></div>
<style>
div {
  margin-bottom: 10px;
}
input:focus {
  outline-color: orange;
  outline-style: solid;
  outline-width: 3px;
}
.outline-offset {
  outline-offset: 5px;
}
</style>

仕様書

関連CSSプロパティ