枠線

outline-offset

要素とアウトラインの距離を指定する

value	description
`1px`	要素とアウトラインの距離を指定する
`0.4rem`	要素とアウトラインの距離を指定する

Demo

<div class="wrapper">
  <input type="text" placeholder="Click me! (offset = 1px)" class="box box-1" />
  <input type="text" placeholder="Click me! (offset = 4px)" class="box box-2" />
</div>

.box-1:focus {
  outline: 2px solid #0073ff;
  outline-offset: 1px;
}
.box-2:focus {
  outline: 2px solid #0073ff;
  outline-offset: 4px;
}

.box {
  padding: 4px 8px;
  border: 1px solid rgb(156, 163, 175);
  border-radius: 4px;
  background: rgb(71, 85, 105);
}
.box::placeholder {
  color: rgb(156, 163, 175);
}
.wrapper {
  display: flex;
}
.box + .box {
  margin-left: 12px;
}

概要

アウトラインと、アウトラインで囲う要素の間の距離を指定します。

outlineのショートハンドには含まれませんので、個別に指定する必要があります。

Example

.box {
  outline: 1px solid hotpink;
  outline-offset: 2px;
}

outline-offset

Demo

概要

Example

関連

参照