CSS outline-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The outline-color property defines the color used to draw an element's outline — the visual line drawn outside the element's border to create emphasis or indicate focus. Unlike borders, outlines do not occupy space in the box model; they are rendered over the page content without affecting layout or element sizing. Because the outline's visibility also depends on the outline's style and width, the effective appearance of the outline is the result of combining outline-style, outline-width and the color you supply.

Rendering details influence how that color is perceived: outlines are typically drawn outside the border edge and may overlap shadows or neighboring content unless shifted with outline-offset. When both a border and an outline exist, the outline visually sits on top of the border; interactions with effects like box-shadow or the element's own border can change contrast and visibility, so choosing the outline color in relation to these is important for clarity.

From a practical and accessibility perspective, outline color is commonly used to render focus indicators for keyboard navigation and other UI states. Because outlines do not change layout, they are a convenient mechanism for signaling state without reflow, but you should ensure sufficient contrast and visibility for users with low vision or in different display modes. Also keep in mind that if an element's outline style is suppressed (for example by a style that renders no outline), the color will have no effect until a visible outline style and width are in place.

Definition

Initial value: invert
Applies to: All elements
Inherited: No
Computed value: The computed value for 'invert is invert'. For [color] values, the computed value is as defined for the 'color' property
Animatable: No
JavaScript syntax: object.style.outlineColor

Interactive Demo

outline-color: green;

outline-color: #800184;

outline-color: rgb(47, 80, 207);

outline-color: hsl(176, 63%, 50%);

outline-color: currentColor;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

outline-color: <color> | invert | inherit

Values

<color>Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively.
invertThis is expected to perform a color inversion on the pixels on the screen.
inherit

Example

HTML

<div class="container">

  <h1>outline-color examples</h1>



  <p>

    <button class="btn">Focus Me (button)</button>

  </p>



  <p>

    <input class="input" placeholder="Focus this input" />

  </p>



  <p>

    <div class="box" tabindex="0">Focusable box (div)</div>

  </p>



  <p>

    <a href="#" class="link">Link (focus me with keyboard)</a>

  </p>

</div>

CSS

/* Layout */
* {
  box-sizing: border-box;
}

.container {
  max-width: 720px;
  margin: 40px auto;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
  padding: 0 18px;
}

h1 {
  font-size: 20px;
  margin-bottom: 18px;
}

p {
  margin: 14px 0;
}

/* Button: outline-style and width defined; outline-color changed on focus */
.btn {
  padding: 10px 16px;
  background: #0f62fe;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  outline-style: solid;
  outline-width: 4px;
  outline-color: transparent; /* start invisible */
  outline-offset: 6px;
  transition: outline-color 160ms ease-in-out, transform 120ms;
}

.btn:focus {
  outline-color: #ff6b6b; /* visible red-ish outline only by changing outline-color */
  transform: translateY(-1px);
}

/* Input: uses a semi-transparent color on focus */
.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d0d7de;
  outline-style: dashed;
  outline-width: 3px;
  outline-color: transparent;
  outline-offset: 6px;
}

.input:focus {
  outline-color: rgba(38, 198, 218, 0.95); /* tealish semi-transparent outline */
  border-color: rgba(38, 198, 218, 0.5);
}

/* Focusable div: dotted outline that becomes green on focus */
.box {
  padding: 14px;
  background: #f6f8fa;
  border-radius: 6px;
  outline-style: dotted;
  outline-width: 3px;
  outline-color: transparent;
  outline-offset: 6px;
}

.box:focus {
  outline-color: hsl(140, 60%, 35%);
}

/* Link: small solid outline on focus */
.link {
  color: #0f62fe;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 4px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: transparent;
  outline-offset: 4px;
}

.link:focus {
  outline-color: #ffb400;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS outline-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.