CSS outline-color Property

Description

The outline-color property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Initial value

invert

Applies to

All elements

Inherited

No

Media

Visual

Computed value

The computed value for 'invert is invert'. For [color] values, the computed value is as defined for the 'color' property

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.outlineColor

Syntax

outline-color: <color> | invert | inherit

Values

• <color>Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively.
• invertThis is expected to perform a color inversion on the pixels on the screen.
• inherit

Example

<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 

.block { 
   outline-style: dotted; 
   outline-width: 3px; 
   outline-color: blue;
   padding: 10px; 
}

Browser Support

Desktop
8	12	1	1.5	7	1.2
Tablets / Mobile
37	18	4	X	1	X

Last updated by CSSPortal on: 3rd November 2019