CSSoutline プロパティは、輪郭線 (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 なので、 style が指定されないと輪郭線は表示されません。

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 の定義
勧告 初回定義。
初期値一括指定の各プロパティとして
適用対象すべての要素
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • interactive: DB に値が見つかりません!
計算値一括指定の各プロパティとして
  • outline-color: キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparentrgba(0,0,0,0) にマップされます
  • outline-width: 絶対的な長さ、キーワード none が指定されると計算値は 0 になる
  • outline-style: 指定値
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 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 ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 7Safari iOS 完全対応 3.1Samsung Internet Android ?

凡例

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

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

このページの貢献者: mfuji09, SphinxKnight, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,