CSS outline-color Property

The outline-color property specifies the color of the line drawn around an element, outside its border edge, to make it stand out.

selector { outline-color: value; }

<color>	Defines the color of the outline using standard formats like hex, RGB, HSL, or named color keywords.
invert	Attempts to perform a color inversion of the pixels on the screen to ensure the outline stands out against any background.

Code Examples

A basic button element demonstrating how to apply a solid vibrant orange outline color for clear visibility.

button.action-btn {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #ff5722;
}

An advanced example using JavaScript to dynamically update the outline-color of a div element when a user interacts with the page.

<div id="box" style="width: 100px; height: 100px; border: 2px solid #333333; outline: 5px solid #cccccc;"></div>
<button onclick="changeColor()">Change Outline</button>

<script>
function changeColor() {
  const box = document.getElementById("box");
  box.style.outlineColor = "#00ff00";
}
</script>

Pro Tip

You can use the "outline-offset" property in combination with outline-color to push the line further away from the element. This is a great trick for creating double-border effects or keeping focus indicators from touching the edges of your design for a cleaner look.

Deep Dive

Think of the outline as a highlight marker that orbits your element without affecting its size or layout. Unlike the border property, which is like adding extra thickness to a wall that pushes other things out of the way, the outline is more like a glow or a laser pointer line that hovers just outside the wall's perimeter. Because it does not take up space in the box model, changing the outline-color won't cause other elements on your page to shift or jump around. It is primarily used to provide visual feedback for user interaction, such as when a link or button gains focus through keyboard navigation.

Best Practices

Always ensure your outline-color has a high contrast ratio against the background. While the "invert" keyword is a smart way to ensure visibility, browser support varies, so explicit colors are often safer. Always pair outline-color with outline-style and outline-width to ensure the outline actually appears, as the default style is usually "none".

Common Pitfalls

A common mistake is setting an outline-color but forgetting to set the outline-style. If the style is "none", the color will never show up. Also, keep in mind that outlines are usually rectangular and do not always follow the curve of a border-radius in older browsers, though modern ones have mostly fixed this behavior.

Accessibility

The outline is a critical accessibility feature. It provides a visual indicator for keyboard users navigating your site. Never set the outline-color to "transparent" or the same color as the background without providing a clear alternative focus style, as this makes your site unusable for people who rely on keyboard navigation to see where they are.

Dev Data Table: outline-color property

default	invert
animatable	yes
inherited	no
experimental	no
year_intro	1998
year_standard	1998
js_syntax_1	element.style.outlineColor = "#ff0000";
js_syntax_2	element.style.setProperty("outline-color", "#ff0000");
js_note	When manipulating this property in JavaScript, use the camelCase version outlineColor or the setProperty method with the original kebab-case string.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1.5, "Safari": 1.2, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }