CSS outline-color Property

CSS outline-color property sets the outline color of an element.


The following table outline the usages and version history of this property.

Default value: invert
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.outlineColor = "#000000"


Here is a syntax for the CSS outline-color property

outline-color: invert | color | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
invert Default. Specifies the inverts the color of the background
color Specifies the outline color
Value Description
color name Name of the outline color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the outline color
rgb(x, x, x) RGB representation of the outline color
rgba(x, x, x, x) RGBA representation of the outline color
hsl(x, x, x) HSL representation of the outline color
hsla(x, x, x, x) HSLA representation of the outline color
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets outline color.

.outline-1 {
  outline-color: pink;
.outline-2 {
  outline-color: #888888;
.outline-3 {
  outline-color: rgb(255, 167, 0, 0.9);
.outline-4 {
  outline-color: hsl(45, 70%, 50%, 0.9);

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.