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

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

Browser Support

Desktop

8	12	1	1.5	7	1.2

Tablets / Mobile

37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu