CSS outline-color property

Definition and Usage

Outline (outline) is a line drawn around an element, located outside the edge of the border, and can highlight the element. The outline property can set the outline line around an element.

Note:Always declare the outline-style property before the outline-color property. An element must have an outline before its color can be changed.

Note:Outline lines do not take up space and are not necessarily rectangular.

The outline-color property sets the color of the visible part of the entire outline of an element. Remember that the outline style cannot be none, otherwise the outline will not appear.

See Also:

CSS Tutorial:CSS Outline

CSS Reference Manual:outline Property

HTML DOM Reference Manual:outlineColor Property

Example

Set the color of the dotted outline:

p
  {
  outline-style:dotted;
  outline-color:#00ff00;
  }

Try Yourself

CSS Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Value

Value Description
color_name Specify the outline color as a color name (e.g., red).
hex_number Specify the outline color as a hexadecimal value (e.g., #ff0000).
rgb_number Specify the outline color as an RGB code (e.g., rgb(255,0,0)).
invert Default. Invert the color (reverse color). This makes the outline visible against different background colors.
inherit It is specified that the outline color setting should be inherited from the parent element.

Technical Details

Default Value: invert
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.outlineColor="#0000FF"

Try It Yourself

Set Outline Color
This example demonstrates how to set the outline color.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Note:If !DOCTYPE is specified, IE8 supports the outline property.