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.

Example

#

An element with a custom outline-color.

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

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

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.

Syntax

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

Values

#

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
<style>
  .outline-example {
    outline-style: solid;
    outline-color: #ef523d;
    padding: 25px;
  }
</style>

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

Browser support

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

Chrome
1.0 Dec 2008
Firefox
1.5 Nov 2005
IE/Edge
8.0 Mar 2009
Opera
7.0 Jan 2003
Safari
1.2 Feb 2004

You may also like

Guides