CSS outline-color Property

The outline-color property specifies the color of the outline.

An outline is a focus indicator that looks like a border.

Outlines do not take up space and can overlap adjacent elements.



An element with a custom outline-color.

An element with an outline color.
  .outline-color {
    border: 3px solid steelblue;
    outline-style: solid;
    outline-width: 5px;
    outline-color: salmon;
    padding: 25px;

<div class="outline-color">
  An element with an outline color.

Using outline-color

outline-color values can be hex, rgb, hsl, rgba, hsla, or a color name.

The outline-style is required for the outline to show.

Also, if outline is 0 or none, it's not visible.

Outlines are designed to draw attention to the element.


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



Value Description
invert Default, inverts color making sure that it is visible regardless of the background color.
color Color value: accepts color name, hex, rgb, rgba, hsl, hsla values.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different outline-color values.

outline-color: #ef523d
  .outline-example {
    outline-style: solid;
    outline-color: #ef523d;
    padding: 25px;

<div class="outline-example">
  outline-color: #ef523d

Browser support

This table shows when outline-color support started for each browser.

1.0 Dec 2008
1.5 Nov 2005
8.0 Mar 2009
7.0 Jan 2003
1.2 Feb 2004

You may also like