CSSの outline-offset プロパティは、 要素の端やボーダーと outline との空間の量を設定します。

アウトラインとは要素の周りに描かれる線のことで、borderよりも外側です。要素とそのアウトラインとの空間は透明です。つまり、親要素の背景と同じになります。

構文

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

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

<length>
要素とそのアウトラインとの空間の幅です。マイナス値を指定するとアウトラインは要素の内側に表示されます。0 を指定するとアウトラインは要素との隙間なく表示されます。

形式構文

<length>

p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}
<p>Gallia est omnis divisa in partes tres.</p>

仕様

仕様書 策定状況 コメント
CSS Transitions
outline-offset の定義
草案 outline-offset をアニメーション可能なものとして定義。
CSS Basic User Interface Module Level 3
outline-offset の定義
勧告 初期定義

初期値0
適用対象すべての要素
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • interactive: DB に値が見つかりません!
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

 

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge ? Firefox 完全対応 1.5IE 未対応 なしOpera 完全対応 9.5Safari 完全対応 1.2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: sutara79, Prinz_Rana, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: sutara79,