B.74. outline-color

Outlines are very similar to borders; however, they do not occupy any space in the CSS box model (i.e. turning off and on an element's outline or changing its outline width should not affect the position of that element, or any other elements on the page). Additionally, an outline should follow the actual shape of the element's content (e.g. hugging the jagged right edge of a left-aligned paragraph) rather than forming a rectangular box around it. The outline of an inline element that flows over several lines is closed at the starts and ends of lines, whereas the border is not.

The outline-color property sets the color of the outline drawn around the selected element(s).

Inherited: No

See also:Section B.16border-color

B.74.1. Value

Any CSS color value, or invert, which will reverse the color(s) of the background over which it is drawn.

Initial value: invert (black in current browsers)

B.74.2. Compatibility

CSS Version: 2

Only Internet Explorer 5 for Macintosh and Opera 7 browsers support this property, and they render only rectangular outlines, as opposed to the content-hugging style prescribed by the CSS2 specification. Both of these browsers use an initial value of black, as they do not support invert.

B.74.3. Example

This style rule puts red outlines around hyperlinks when the user hovers the mouse over them:

a:hover {
  outline-style: solid;
  outline-color: red;
}