outline-color

概要

CSS の outline-color プロパティは、要素のアウトラインの色を設定します。アウトラインとは、要素を囲むようにボーダー境界の外側に描かれる線で、要素を目立たせます。

構文

<color> | invert
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

outline-color: invert
outline-color: red

outline-color: inherit

値

<color>

さまざまな色を表すキーワードや記法について、 <color> をご覧ください

invert

アウトラインがよく見えるように、背景の反転色を使います。フォーカスの縁取りを、背景色によらずもっと目立たせることができます。この機能のサポートはブラウザに要求されていないことに注意してください。サポートされていなければ、式は単に無効値と解釈されます

例

次の CSS は:

.example {
  /* make the outline blue */
  outline-color: #0000FF;
}

次の色つきの 2px のアウトラインを作ります:

outline-color is blue.

仕様

ブラウザ実装状況