CSS outline-color Property

Definition and Usage

The outline-color property sets the color of an element’s outline — the line drawn outside the border. It does not change layout. Pair it with outline-style (and usually outline-width) or use the outline shorthand.

The initial value is auto, which computes to currentColor today. Choose colors that keep strong contrast against both the page background and the element when used as a focus ring.

CSS Syntax

Example: outline-color: #2563eb; Prefer a concrete <color> for reliable focus styles.

Property Values

How to Use outline-color

Make the outline visible first, then pick a color with enough contrast.

1. Set outline-style (for example solid) and a width if needed.
2. Set outline-color to a named color, hex, rgb(), hsl(), or currentColor.
3. For keyboard focus, apply it under :focus or :focus-visible.
4. Check contrast against the backgrounds around the ring (WCAG non-text contrast aims for at least 3:1).

Live Preview

Width and style stay fixed. Change only outline-color on the sample box.

CSS Examples

Each snippet sets a style and width so the color is visible, then changes only outline-color. Use Try It Yourself for a live editor.

<style>
  div {
    outline-style: solid;
    outline-width: 3px;
    outline-color: #2563eb;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>Blue outline</div>

<style>
  div {
    color: #0f766e;
    outline: 3px solid;
    outline-color: currentColor;
    border: 1px solid #cbd5e1;
    padding: 12px;
  }
</style>

<div>Matches text color</div>

<style>
  button {
    outline: none;
  }
  button:focus {
    outline-style: solid;
    outline-width: 3px;
    outline-color: #d97706;
    outline-offset: 3px;
  }
</style>

<button type="button">Tab to focus</button>

Key Takeaways