outline-color property sets the color of an element's outline.
An outline is a line that is drawn around an element, outside the borders.
An outline is a line that is drawn around an element, outside the border. Unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. The border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else.
The outline is not a part of the element's frame, therefore the element's width and height properties do not contain the width of the outline.
|Applies to||all elements|
|Computed value||as specified|
|Animatable||yes See animatable properties. Demo|
The following example shows how to use
Note: Always declare the outline-style property before the
outline-color property. An element must have an outline before you can change the color.
This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Staturation/Lightness). Control over the alpha channel is also supported on RGB (rgba) and HSL (hsla) formats.
This tool will help you identify the perfect CSS colors to apply to your HTML.Go to Color Picker Tool
The numbers in the table specify the first browser version that fully supports the
The following table describes the values of
|invert||Performs a color inversion of the background to ensure the outline is visible (This is default)|
|color||Sets the color of the outline|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS outline property
CSS outline-offset property
CSS outline-style property
CSS outline-width property