1. css
  2. /properties
  3. /outline-color

outline-color

Definition

The outline-color property in CSS is used to set the color of the outline around an element. Outlines are non-rectangular shapes that surround an element and are typically used to indicate focus, active states, or other types of user interactions.

Examples

Set the outline color to red:

.example {
  outline-color: red;
}

Set the outline color to a hexadecimal value:

.example {
  outline-color: #00ff00;
}

Set the outline color to a named color:

.example {
  outline-color: blue;
}

Values

ValueDescription
colorSpecifies the color of the outline. The default value is the current text color.
invertSpecifies that the outline color should be the inverse of the background color. This can be useful for ensuring that the outline is visible on any background color. This value is not supported in Internet Explorer.
initialResets the property to its default value.
inheritInherits the property from its parent element.
currentColorSpecifies that the value of the color property should be used as the outline color.

Best Practices

  • Ensure that the contrast between the outline color and the element background is sufficient for users with visual impairments.
  • Use outline-color in combination with other outline-related properties, such as outline-style and outline-width, to create a complete outline around an element.
  • Consider using a transparent outline color (outline-color: transparent;) to create an invisible outline that can still be used to trigger focus styles or other interactions.
  • Test the outline-color property in different browsers to ensure consistent behavior.
  • Be aware that some older browsers may not support the invert value or may require vendor prefixes.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes