CSS の outline-color プロパティは、要素の輪郭線の色を設定します。

輪郭線の表示方法を定義する際は、一括指定プロパティの outline を使用したほうが普通は便利です。

輪郭線は要素の周囲、 border の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の境界線の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも(明示的に重複させない限り)重複しないように合わせます。

構文

/* <color> 値 */
outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;

/* キーワード値 */
outline-color: invert;

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

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

<color>
輪郭線の色で、 <color> で指定します。
invert
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。

形式文法

<color> | invert

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

HTML

<p>見ての通り、輪郭線は青です。</p>

CSS

p {
  outline: 2px solid;      /* 輪郭線の幅と種類 */
  outline-color: #0000FF;  /* 輪郭線を青にする */
  margin: 5px;
}

アクセシビリティへの配慮

独自のフォーカススタイルを作成するときに、ふつう outline プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

仕様書

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
outline-color の定義
勧告 変更なし。
CSS Transitions
outline-color の定義
草案 outline-color をアニメーション可能と定義した。
CSS Level 2 (Revision 1)
outline-color の定義
勧告 初回定義。

初期値ブラウザーが対応していれば invert、そうでなければ currentColor
適用対象すべての要素
継承なし
メディア一括指定の各プロパティとして
  • visual: DB に値が見つかりません!
  • interactive: DB に値が見つかりません!
計算値キーワード invert が指定されると計算値も invert。色が指定されると、半透明なら、計算値はそれに一致するrbga() で、不透明なら、それに一致する rgb()。キーワード transparentrgba(0,0,0,0) にマップされます
アニメーションの種類
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112

1.5

1 — 3.6 -moz-

871.2
invert なし ? あり — 387 — 15 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり ? ? ? ?
invert ? ? ? ? ? ? なし

関連情報

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

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