outline-color

Summary

The outline-color property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Overview table

Initial value

invert

Applies to

All elements

Inherited

No

Media

visual

Computed value

The computed value for ‘invert’ is ‘invert’. For <color> values, the computed value is as defined for the ‘color’ property.

Animatable

Yes

CSS Object Model Property

outlineColor

Percentages

N/A

Syntax

• outline-color: <color>
• outline-color: inherit
• outline-color: invert

Values

<color>

Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively.

invert

This is expected to perform a color inversion on the pixels on the screen.

inherit

This is a keyword indicating that the value is inherited from their parent’s element calculated value.

Examples

An example of using outline color

<div class="outline">I ♥ WebPlatform.org!</div>
<div class="outline outline--blue">I ♥ WebPlatform.org!</div>
<div class="outline outline--green">I ♥ WebPlatform.org!</div>
<div class="outline outline--invert">I ♥ WebPlatform.org!</div>

View live example

Multiple classes that change the original outline color

/*
  outline color example
*/

.outline--green {
  /* make the outline green */
  outline-color: #00ff00;
}

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

.outline--invert {
    /* outline invert */
    outline-color: invert;
}

View live example

Usage

 The color value can be a numerical value, such as one of the following:

• a basic color keyword, such as “red”
• a hex value, such as #ff0000
• an red-green-blue (RGB) value, such as rgb(255,0,0)
• an RGB-alpha (RGBA) that includes color opacity, such as rgba(255,0,0,1) or rgba(100%,0%,0%,1)
• a hue-saturation-lightness (HSL), such as hsl(0, 100%, 50%)
• HSLa, such as hsl(0, 100%, 50%, 1)

The color value can also be an extended keyword, such as aliceblue or lavenderblush. For a full list of extended keywords, see the CSS Color Module Level 3 spec, which is the consolidation of various specifications.

Notes

• A value of invert ensures that the outline is visible regardless of the background color.
• The outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Related specifications

CSS Basic User Interface Module Level 3 (CSS3 UI)

Working Draft

Attributions

• Mozilla Developer Network : Article

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]