outline

outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ (outline-style, outline-width, outline-color) を単一の宣言で設定するための一括指定です。

他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

境界線と輪郭線

境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。

  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。
  • 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。

構文

/* 種類 */
outline: solid;

/* 色 | 種類 */
outline: #f66 dashed;

/* 種類 | 幅 */
outline: inset thick;

/* 色 | 種類 | 幅 */
outline: green solid 3px;

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

outline プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。

メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none だからです。特筆すべき例外は input 要素で、ブラウザーが既定のスタイルを与えます。

値

<'outline-color'>
輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 outline-color を参照してください。
<'outline-style'>
輪郭線の種類を設定します。未指定の場合の既定値は none です。 outline-style を参照してください。
<'outline-width'>
輪郭線の太さを設定します。未指定の場合の既定値は medium です。 outline-width を参照してください。

形式文法

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

例

HTML

<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

結果

アクセシビリティの考慮事項

outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
outline の定義		 勧告 変更なし。
CSS Level 2 (Revision 1)
outline の定義		 勧告 初回定義
初期値一括指定の各プロパティとして
適用対象すべての要素
継承なし
計算値一括指定の各プロパティとして
  • outline-color: キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparent は rgba(0,0,0,0) にマップされます
  • outline-width: 絶対的な長さ、キーワード none が指定されると計算値は 0 になる
  • outline-style: 指定値
アニメーションの種類一括指定の各プロパティとして

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
outlineChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 Firefox includes absolutely positioned elements inside the outline (see bug 687311).
未対応 1 — 3.6
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 8Opera 完全対応 7Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。