Manuales 
outline-color a6fj
The outline-color property is used to set the color of an element’s outline. 6c683n
An outline is a line that is drawn outside the outline property entry for more information about outlines, how they differ from borders, and more.
The outline-color property is a longhand property that can be specified as part of the shorthand outline property. It is usually more convenient to set the outline of an element using the shorthand property.
Official Syntax 55184y
- Syntax:
outline-color: <color> | invert | inherit
- Initial: invert
- Applies To: all elements
- Animatable: yes, as a color
Values 584j31
- <color>
-
See the
<color>entry for a list of possible color values. - invert
-
This is the default color value if the browser s this keyword.
The
invertkeyword inverts whatever color is applied to the background. This ensures enough contrast and hence visibility of the outline regardless of background color.More specifically, this keyword value causes the browser to invert the pixels on the screen where the outline will go, to ensure maximum visibility and focus on the element.
Browsers may ignore the
invertvalue on platforms that do not color inversion of the pixels on the screen. If the browser does not theinvertvalue then the initial value of theoutline-colorproperty is the value of thecolorproperty. - inherit
- The element inherits its outline color from its parent.
Examples 3e5p5z
The following adds a 2px-width purple outline to input fields when they are focused/tabbed. The width and style of the outline are set using the outline-style properties.
input[type="text"]:focus {
outline-width: 2px;
outline-style: solid;
outline-color: purple;
}
Live Demo 2x4j2k
The following demo sets the outline color on boxes (<div>s) with different outlines.
Browser k5t66
The outline-color property is ed in all major browsers: Chrome, Firefox, Safari, Opera, and on Android and iOS. In Internet Explorer, the property is ed starting from version 8.