outline-width

CSS の outline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 border よりも外側です。

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ outline を使ったほうが便利です。

構文

/* キーワード値 */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> 値 */
outline-width: 1px;
outline-width: 0.1em;

/* グローバル値 */
outline-width: inherit;

outline-width プロパティは、以下に挙げた値のうちの一つで指定します。

<length>
輪郭線の太さを <length> で指定します。
thin
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 1px です。
medium
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 3px です。
thick
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 5px です。

形式文法

<line-width>

where
<line-width> = <length> | thin | medium | thick

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
outline-width の定義
勧告 変更なし。
CSS Transitions
outline-width の定義
草案 outline-width をアニメーション可能なものとして定義。
CSS Level 2 (Revision 1)
outline-width の定義
勧告 初回定義
初期値medium
適用対象すべての要素
継承なし
計算値絶対的な長さ、キーワード none が指定されると計算値は 0 になる
アニメーションの種類length

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
outline-widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
完全対応 1.5
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。