CSS outline-color Property

Description

The outline-color CSS property is used to specify the color of the outline that is applied to an element when it gains focus, typically through keyboard navigation or when clicked. Outlines are essential for ensuring accessibility, as they provide a visible indication of which element is currently focused, aiding users who rely on keyboard navigation or screen readers. By setting the outline-color, web developers can customize the color of this focus indicator to match their design while maintaining accessibility standards.

Initial value: invert
Applies to: All elements
Inherited: No
Computed value: The computed value for 'invert is invert'. For [color] values, the computed value is as defined for the 'color' property
Animatable: No
JavaScript syntax: object.style.outlineColor

Interactive Demo

outline-color: green;

outline-color: #800184;

outline-color: rgb(47, 80, 207);

outline-color: hsl(176, 63%, 50%);

outline-color: currentColor;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

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

HTML

<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>

CSS

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

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS outline-color property.

Desktop

12	1	1.5	7	1.2

Tablets / Mobile

18	4	14	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us