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.
<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>
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. |
Click the buttons to see the different outline-color values.
<style>
.outline-example {
outline-style: solid;
outline-color: #ef523d;
padding: 25px;
}
</style>
<div class="outline-example">
outline-color: #ef523d
</div>
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 |
