outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

outline-offsetCSS のプロパティで、要素の辺や境界線と輪郭線との空間の量を設定します。

試してみましょう

構文

css
/* <length> 値 */
outline-offset: 3px;
outline-offset: 0.2em;

/* グローバル値 */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

<length>

要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。

解説

輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線の間は透明です。つまり、親要素の背景と同じになります。

公式定義

初期値0
適用対象すべての要素
継承なし
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類length

形式文法

outline-offset = 
<length>

輪郭線のオフセットをピクセル数で設定

HTML

html
<p>Gallia est omnis divisa in partes tres.</p>

CSS

css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# outline-offset

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-offset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報