This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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