CSS outline-color Property

What You’ll Learn

The outline-color property controls the color of an element’s outline. It is a key piece of focus styling and visual emphasis for interactive elements.

Introduction

The outline-color property in CSS allows developers to set the color of an element’s outline. The outline is a line drawn around elements, outside the border edge, which can be used to emphasize or distinguish elements on the page.

By customizing the outline-color, you can enhance the visibility of interactive elements like buttons and form fields.

Definition and Usage

outline-color is one part of the outline system. You usually combine it with outline-width and outline-style, or use the outline shorthand.

Choose colors with strong contrast for focus states so keyboard users can clearly see which element is active.

📝 Syntax

The syntax for the outline-color property is simple. You can specify a color using any valid CSS color value.

element {
  outline-color: color;
}

Here, the color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

Basic Example

button {
  outline: 2px solid;
  outline-color: red;
}

Syntax Rules

• Any valid CSS color value works, including currentColor.
• The outline must have a visible style and width to show the color.
• You can set color separately when width and style come from another rule.
• Use :focus-visible to apply outline colors only when needed.

🎯 Default Value

The default value of the outline-color property is currentColor. If no outline-color is specified, the outline uses the current text color of the element.

That makes outlines automatically match text color unless you override them.

💎 Property Values

Examples Gallery

Set outline colors with named colors, hex values, focus states, and currentColor.

<style>
  button {
    outline: 2px solid;
    outline-color: red;
  }
</style>

<button>Click Me</button>

<style>
  input {
    outline: 3px solid;
    outline-color: #33cc33;
  }
</style>

<input type="text" placeholder="Type here">

a:focus-visible {
  outline: 3px solid;
  outline-color: #2563eb;
  outline-offset: 2px;
}

.tag {
  color: #9333ea;
  outline: 2px solid;
  outline-color: currentColor;
}

Part of the outline shorthand

outline-color is the color component of the outline shorthand. You can also set outline-width and outline-style separately, or move the ring outward with outline-offset.

/* Same result in one line */
button {
  outline: 2px solid #2563eb;
}

/* Or split into longhand */
button {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #2563eb;
}

♿ Accessibility

• Use high contrast — Focus outline colors should stand out against the background.
• Do not remove focus color — Replace default outlines with a visible custom color instead of removing them.
• Prefer :focus-visible — Apply strong outline colors when keyboard focus is shown.
• Test with real backgrounds — A color that works on white may fail on images or dark sections.

💡 Best Practices