outline-color

style.css

/* Specify with a color name */
div.test { outline: solid 3px; outline-color: red;}

/* Specify with a color code */
div.test2 { outline: solid 3px; outline-color: #3498db;}

/* Specify semi-transparent with rgba() */
div.test3 { outline: solid 3px; outline-color: rgba(255, 0, 0, 0.5);}

/* currentColor (same color as the text) */
div.test4 { color: green; outline: solid 3px; outline-color: currentColor;}

/* transparent */
div.test5 { outline: solid 3px; outline-color: transparent;}

Value	Description
transparent	Sets the outline color to transparent.
color code or color name	Changes the outline to the specified color. If 'outline-color' is not specified, the color set by the 'color' property becomes the initial value.

※ The samples below have 'outline: solid 5px' specified before the 'outline-color' property.

<div style="outline: solid 5px; outline-color: red; height: 100px; padding: 10px; font-weight: bold;">This is a div element with height 100px and padding 10px.</div>

※ Version data is based on MDN.

Specifies the color of the outline. Unlike the 'border' property, outlines do not have separate top, right, bottom, and left sides.

The outline is a border drawn outside the element's border area — not inside. It corresponds to the outside of the 'border-top', 'border-right', 'border-bottom', and 'border-left' areas shown in the box model diagram below.

<div style="border: solid 5px #000; outline: solid 5px; outline-color: red; height: 100px;">This is a div element with height 100px. You can see a red outline drawn around the black border.</div>

Unlike borders, outlines have no concept of size and take up no space. This means you can draw a border around content without affecting the layout of surrounding elements.

<style scoped>
	div:hover {border: solid 5px red;}
</style>
<p>The following sample shows how a border affects surrounding elements.</p>
<div style="height: 100px; background-color: yellow;">This is a div element with height 100px. Try hovering over this element. The border causes the element to change size, which affects the surrounding elements.</div>
<p style="height: 100px; background-color: aqua";>This is a p element.</p>

<style scoped>
	div:hover {outline: solid 5px red;}
</style>
<p>The following sample shows how an outline does not affect surrounding elements.</p>
<div style="height: 100px; background-color: yellow;">This is a div element with height 100px. Try hovering over this element. An outline is drawn but it does not affect the surrounding elements.</div>
<p style="height: 100px; background-color: aqua";>This is a p element.</p>

When specifying outline color with the 'outline-color' property, the outline will not be drawn unless the 'outline-style' property is set to a value other than its initial value (since the initial value is 'none'). Please keep this in mind.

If nothing is specified for the 'outline-color' property, the color set by the 'color' property becomes the initial value.