CSS Outline Color: Syntax, Values, Examples & Guide

CSS Outline Color

The CSS outline-color property controls the color of an elements outline. An outline is a line drawn around an element, usually outside its border. It is commonly used to highlight focused elements such as buttons, links, form fields, and other interactive controls.

Unlike a border, an outline generally does not occupy space in the CSS box model. This makes outlines especially useful for focus indicators because they can highlight an element without changing its dimensions or shifting surrounding content.

button {
  outline-color: blue;
}

However, setting only outline-color may not make an outline visible. In most cases, you also need to define an outline-style.

button {
  outline-style: solid;
  outline-color: blue;
}

A shorthand version is often simpler:

button {
  outline: 2px solid blue;
}

What Is `outline-color` in CSS?

outline-color is a CSS property that specifies the color used to draw an element’s outline.

Basic syntax:

selector {
  outline-color: value;
}

For example:

input {
  outline-style: solid;
  outline-color: green;
}

When an outline exists, the browser draws it around the outside of the element’s border edge.

The property is particularly important for:

Keyboard focus indicators
Form field highlighting
Buttons and links
Validation states
Custom accessibility-focused interfaces
Temporary debugging
Interactive components

CSS `outline-color` Syntax

The general syntax is:

outline-color: color;

It accepts standard CSS color values.

Examples:

outline-color: red;
outline-color: #ff0000;
outline-color: rgb(255 0 0);
outline-color: rgba(255, 0, 0, 0.5);
outline-color: hsl(0 100% 50%);
outline-color: currentColor;

Global CSS values can also be used:

outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

Basic Example

Consider a button:

<button class="example-button">Submit</button>

CSS:

.example-button {
  outline-style: solid;
  outline-width: 3px;
  outline-color: blue;
}

The button receives a blue solid outline.

The three individual outline properties are:

outline-width: 3px;
outline-style: solid;
outline-color: blue;

They can be combined using the outline shorthand:

outline: 3px solid blue;

Important: `outline-color` Alone May Not Display an Outline

One of the most common mistakes is writing:

div {
  outline-color: red;
}

and expecting a red outline to appear.

The problem is that an outline needs an appropriate style to be rendered.

A better example is:

div {
  outline-style: solid;
  outline-color: red;
}

You can also specify its width:

div {
  outline-width: 2px;
  outline-style: solid;
  outline-color: red;
}

Or simply:

div {
  outline: 2px solid red;
}

Values Supported by `outline-color`

The property accepts CSS <color> values as well as global keywords.

Value	Example	Purpose
Named color	`red`	Uses a CSS named color
Hexadecimal	`#ff0000`	Defines color with hexadecimal notation
RGB	`rgb(255 0 0)`	Defines red, green, and blue components
RGBA/alpha	`rgb(255 0 0 / 50%)`	Adds transparency
HSL	`hsl(0 100% 50%)`	Defines hue, saturation, and lightness
`currentColor`	`currentColor`	Uses the element’s computed `color`
`invert`	`invert`	Historically requests an inverted-color outline where supported
`inherit`	`inherit`	Takes the parent’s computed value
`initial`	`initial`	Restores the property’s initial value
`unset`	`unset`	Behaves according to inheritance rules
`revert`	`revert`	Rolls back to an earlier cascade origin
`revert-layer`	`revert-layer`	Rolls back within cascade layers

Using Named Colors

CSS provides many predefined color names.

.box {
  outline: 4px solid;
  outline-color: red;
}

Other examples include:

outline-color: blue;
outline-color: green;
outline-color: orange;
outline-color: purple;
outline-color: black;
outline-color: white;
outline-color: transparent;

Named colors are easy to read, although hexadecimal, RGB, HSL, or design-system variables are often more flexible for larger projects.

Using Hexadecimal Colors

Hexadecimal notation is widely used in CSS.

.box {
  outline: 3px solid;
  outline-color: #2563eb;
}

A six-digit hexadecimal color follows this pattern:

#RRGGBB

For example:

outline-color: #ff0000; /* red */
outline-color: #00ff00; /* lime */
outline-color: #0000ff; /* blue */
outline-color: #000000; /* black */
outline-color: #ffffff; /* white */

CSS also supports shorthand hexadecimal values when the digits can be compressed:

outline-color: #f00;

This is equivalent to:

outline-color: #ff0000;

Hex colors can also include an alpha channel:

outline-color: #ff000080;

Using RGB Colors

RGB defines a color using red, green, and blue components.

Traditional syntax:

outline-color: rgb(0, 128, 255);

Modern CSS syntax can be written as:

outline-color: rgb(0 128 255);

Example:

.card {
  outline-width: 3px;
  outline-style: solid;
  outline-color: rgb(30 120 220);
}

RGB is useful when colors are generated or manipulated programmatically.

Transparent Outline Colors

CSS colors can contain an alpha value.

For example:

.box {
  outline: 5px solid;
  outline-color: rgb(0 0 255 / 40%);
}

Older comma-based syntax is also widely recognized:

outline-color: rgba(0, 0, 255, 0.4);

The alpha value controls transparency.

An alpha of 0 is fully transparent, while 1 or 100% is fully opaque.

Using HSL Colors

HSL stands for:

Hue
Saturation
Lightness

Example:

.box {
  outline: 3px solid;
  outline-color: hsl(210 100% 50%);
}

HSL can be convenient when creating related color variations.

For example:

.normal {
  outline: 2px solid hsl(210 80% 50%);
}

.light {
  outline: 2px solid hsl(210 80% 70%);
}

.dark {
  outline: 2px solid hsl(210 80% 30%);
}

Using `currentColor`

currentColor is one of the most useful values for outlines.

It represents the computed value of the element’s color property.

button {
  color: darkblue;
  outline: 2px solid;
  outline-color: currentColor;
}

The outline therefore follows the text color.

You can simplify this further:

button {
  color: darkblue;
  outline: 2px solid currentColor;
}

This technique is valuable when creating reusable components.

For example:

.success {
  color: green;
  outline: 2px solid currentColor;
}

.warning {
  color: orange;
  outline: 2px solid currentColor;
}

.error {
  color: red;
  outline: 2px solid currentColor;
}

Each component’s outline automatically follows its text color.

What Is the Default `outline-color`?

The initial value of outline-color is auto.

Conceptually, auto allows the user agent to choose an appropriate outline color. This is particularly useful for browser-provided focus indicators.

Therefore, developers should be careful about replacing browser defaults unless the custom replacement remains clearly visible and accessible.

The `invert` Value

You may encounter older CSS examples such as:

outline-color: invert;

The intention of invert is to produce an outline color that contrasts with the pixels underneath it.

However, support and behavior have historically varied. It should not be relied upon as the primary method for creating modern, consistent focus indicators.

For predictable designs, use an explicit color or a value such as:

outline-color: currentColor;

`outline-color` with `outline-style`

An outline color becomes meaningful when an outline style is rendered.

Example:

.box {
  outline-color: purple;
  outline-style: solid;
}

Different outline styles can produce different appearances.

.solid {
  outline: 3px solid red;
}

.dashed {
  outline: 3px dashed blue;
}

.dotted {
  outline: 3px dotted green;
}

.double {
  outline: 5px double purple;
}

Common outline-style values include:

Style	Description
`none`	No outline
`hidden`	Hidden outline
`dotted`	Dotted line
`dashed`	Dashed line
`solid`	Single solid line
`double`	Double line
`groove`	Grooved appearance
`ridge`	Raised ridge appearance
`inset`	Inset appearance
`outset`	Outset appearance

`outline-color` with `outline-width`

The width determines the thickness of the outline.

.box {
  outline-color: blue;
  outline-style: solid;
  outline-width: 4px;
}

Common width keywords include:

outline-width: thin;
outline-width: medium;
outline-width: thick;

You can also use a length:

outline-width: 1px;
outline-width: 2px;
outline-width: 0.2rem;

Together:

.box {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #0066cc;
}

CSS `outline` Shorthand

Instead of declaring width, style, and color separately:

button {
  outline-width: 3px;
  outline-style: solid;
  outline-color: blue;
}

you can use:

button {
  outline: 3px solid blue;
}

The shorthand is usually preferred when all three values are being defined together.

Individual properties are useful when only one aspect needs to change.

For example:

button {
  outline: 2px solid;
}

button.success {
  outline-color: green;
}

button.error {
  outline-color: red;
}

Outline Color on Focus

One of the most important applications of outlines is keyboard focus.

Example:

button:focus {
  outline: 3px solid blue;
}

A modern approach often uses :focus-visible:

button:focus-visible {
  outline: 3px solid #005fcc;
}

:focus-visible allows browsers to display the custom focus styling when a visible focus indicator is appropriate, particularly during keyboard navigation.

For example:

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

This produces a visible focus indicator with some space between the element and its outline.

Accessibility and Outline Color

Outline colors are not merely decorative when used for focus. They can play an important accessibility role.

Keyboard users often navigate websites with keys such as Tab. A visible focus indicator helps them identify the currently active control.

Avoid doing this without providing an accessible replacement:

button:focus {
  outline: none;
}

Removing the browser’s default focus outline can make navigation much harder.

If the default outline does not fit your design, replace it with another clearly visible focus indicator.

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

The focus indicator should remain easy to distinguish against surrounding colors.

Using `outline-offset` with Outline Color

outline-offset controls the distance between an outline and the element’s border edge.

Example:

button {
  outline: 3px solid blue;
  outline-offset: 4px;
}

A positive offset moves the outline farther outward.

outline-offset: 5px;

A negative value moves it inward:

outline-offset: -2px;

Combining a strong color with a small positive offset can create a clean focus indicator.

button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

Outline Color vs Border Color

outline-color and border-color may look similar, but they control different parts of an element.

Example border:

.box {
  border: 3px solid red;
}

Example outline:

.box {
  outline: 3px solid blue;
}

An element can have both:

.box {
  border: 2px solid black;
  outline: 3px solid orange;
}

Main Differences

Feature	Outline	Border
Color property	`outline-color`	`border-color`
Part of box model	No	Yes
Normally takes layout space	No	Yes
Can use offset	Yes	No direct border equivalent
Common focus use	Very common	Possible
Per-side control	No standard individual outline sides	Yes
May overlap nearby content	Yes	Normally participates in element dimensions

The border belongs to the element’s box. An outline is drawn around it without behaving like an additional box-model layer.

Outline Color vs Box Shadow

A box-shadow can also create a ring-like visual effect.

For example:

button:focus-visible {
  box-shadow: 0 0 0 4px lightblue;
}

However, an outline and a shadow are not identical.

An outline is explicitly designed as an outline and works naturally for focus indication:

button:focus-visible {
  outline: 3px solid blue;
}

Designers sometimes combine both:

button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(0 95 204 / 20%);
}

This can produce a prominent focus state.

Changing Outline Color on Hover

You can change an outline color dynamically with pseudo-classes.

.card {
  outline: 2px solid gray;
}

.card:hover {
  outline-color: blue;
}

The outline remains the same width and style, but its color changes.

Another example:

button {
  outline: 2px solid transparent;
}

button:hover {
  outline-color: green;
}

Be careful not to treat hover styling as a replacement for keyboard focus styling.

Form Validation Example

Outline colors can help communicate form states.

input {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

input:focus {
  outline-color: blue;
}

input:invalid {
  outline-color: red;
}

For better accessibility, do not communicate important information using color alone. Include text, labels, messages, or other visual cues when necessary.

Using CSS Variables for Outline Colors

CSS custom properties make outline colors easier to maintain.

:root {
  --focus-color: #005fcc;
  --error-color: #c62828;
  --success-color: #167c36;
}

Then use them:

button:focus-visible {
  outline: 3px solid var(--focus-color);
}

.error {
  outline: 2px solid var(--error-color);
}

.success {
  outline: 2px solid var(--success-color);
}

If the site’s design system changes, you can update the variables instead of editing every component.

Outline Colors in Dark Mode

A focus color that works on a light background may not work equally well on a dark background.

CSS custom properties can help:

:root {
  --focus-outline: #005fcc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus-outline: #8ab4ff;
  }
}

button:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

Always evaluate the focus indicator against the actual colors surrounding the component.

Transitioning Outline Color

outline-color is a color property, so transitions can be used between compatible color values.

button {
  outline: 2px solid transparent;
  transition: outline-color 0.2s ease;
}

button:hover {
  outline-color: blue;
}

This creates a gradual color transition.

For important keyboard focus indicators, however, avoid making the effect so slow or subtle that users have difficulty identifying focus immediately.

Transparent Outline Technique

A transparent outline can be useful when defining a component’s outline structure before changing its color.

button {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

button:focus-visible {
  outline-color: blue;
}

This allows only the color to change between states.

Remember that a fully transparent outline is not itself a visible focus indicator.

Using `inherit`

The inherit keyword tells the property to use the computed outline-color value of its parent.

.parent {
  outline-color: blue;
}

.child {
  outline-style: solid;
  outline-color: inherit;
}

This is different from currentColor.

inherit refers to the parent’s value for the same property, whereas currentColor represents the element’s computed text color.

Using `initial`

initial resets the property to its initial value.

.box {
  outline-color: initial;
}

For outline-color, the initial value is auto.

Using `unset`

Example:

.box {
  outline-color: unset;
}

unset makes a property behave as inherit if it normally inherits and as initial if it does not.

Because outline-color is not normally inherited, unset effectively resets it toward its initial behavior.

Using `revert`

The revert keyword rolls a declaration back according to the CSS cascade.

button {
  outline-color: revert;
}

It can be useful when a stylesheet needs to undo styling introduced at the current cascade origin and allow an earlier origin to take effect.

Using `revert-layer`

When CSS cascade layers are being used, revert-layer can roll the property back to the value established outside the current layer.

button {
  outline-color: revert-layer;
}

This is mainly useful in larger stylesheets, frameworks, component libraries, and design systems that organize CSS with @layer.

Outline Color Does Not Affect Element Size

One of the major differences between outlines and borders is layout behavior.

Suppose you have:

.box {
  width: 200px;
  height: 100px;
  outline: 10px solid red;
}

The outline does not add 20 pixels to the declared width or height in the same way a border can affect box sizing calculations.

This makes outlines convenient for visual highlighting without causing layout shifts.

However, because an outline can extend outside an element, it may visually overlap nearby content.

Outlines and the CSS Box Model

The simplified box model consists of:

Content
Padding
Border
Margin

An outline is not another normal box-model layer.

Conceptually, it appears outside the border:

Outline
  Border
    Padding
      Content

Because it is drawn rather than included as ordinary layout space, adding an outline usually does not push neighboring elements away.

Practical Button Example

HTML:

<button class="primary-btn">Continue</button>

CSS:

.primary-btn {
  padding: 10px 18px;
  border: none;
  background: #1565c0;
  color: white;
  border-radius: 6px;
}

.primary-btn:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

The contrasting outline makes keyboard focus easier to recognize.

Practical Input Example

HTML:

<label for="email">Email</label>
<input id="email" type="email">

CSS:

input {
  border: 1px solid #777;
  padding: 10px;
}

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

The border remains part of the normal design while the outline communicates focus.

Changing Only the Outline Color

One advantage of using the individual property is that the rest of the outline can remain unchanged.

button {
  outline-width: 3px;
  outline-style: solid;
  outline-color: gray;
}

button:hover {
  outline-color: green;
}

button:focus-visible {
  outline-color: blue;
}

Only the color changes between states.

Using `currentColor` in Reusable Components

Suppose several buttons use different theme colors:

.button {
  outline: 2px solid currentColor;
}

.button-blue {
  color: blue;
}

.button-green {
  color: green;
}

.button-red {
  color: red;
}

There is no need to define the outline color separately for every variant.

The currentColor value keeps the outline synchronized with the text color.

Common Mistakes

1. Setting only `outline-color`

Incorrect or incomplete:

.box {
  outline-color: red;
}

If no visible outline style is present, the expected outline may not appear.

Better:

.box {
  outline: 2px solid red;
}

2. Removing focus outlines completely

Avoid:

*:focus {
  outline: none;
}

This can seriously reduce keyboard usability.

Instead, provide an accessible replacement:

*:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

3. Choosing a low-contrast color

A pale gray outline on a white background may be difficult to see.

Choose a color that stands out clearly against adjacent colors.

4. Using color as the only state indicator

For errors or important status messages, combine color with text or another meaningful cue.

5. Confusing outline with border

Remember:

border-color: red;

changes the border.

outline-color: red;

changes the outline.

They are separate CSS properties.

Best Practices

For most websites, keep these principles in mind:

Use clearly visible outline colors.
Preserve keyboard focus indicators.
Prefer :focus-visible when appropriate.
Test focus colors on both light and dark backgrounds.
Use outline-offset when extra separation improves visibility.
Consider currentColor for reusable components.
Use CSS custom properties in larger design systems.
Do not depend on color alone to communicate critical information.
Avoid global outline: none rules unless an equally effective focus treatment replaces them.
Test keyboard navigation throughout the interface.

Complete Accessible Focus Example

:root {
  --focus-color: #005fcc;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

This creates a consistent focus treatment across common interactive controls.

`outline-color` Property Summary

Property	Details
Property	`outline-color`
Purpose	Sets the color of an element’s outline
Initial value	`auto`
Inherited	No
Applies to	Elements that can have an outline
Common values	CSS `<color>`, `auto`, global keywords
Common use	Focus indication and visual highlighting
Part of box model	No
Shorthand property	`outline`
Related properties	`outline-style`, `outline-width`, `outline-offset`

`outline-color` vs Related Properties

Property	Purpose	Example
`outline-color`	Sets outline color	`outline-color: blue;`
`outline-style`	Sets outline line style	`outline-style: solid;`
`outline-width`	Sets outline thickness	`outline-width: 3px;`
`outline-offset`	Sets distance from border edge	`outline-offset: 4px;`
`outline`	Shorthand for width, style, and color	`outline: 3px solid blue;`

Quick Examples

Red Outline

.element {
  outline: 2px solid red;
}

Blue Outline

.element {
  outline-style: solid;
  outline-color: blue;
}

Hex Color

.element {
  outline: 3px solid #2563eb;
}

RGB Color

.element {
  outline: 3px solid rgb(37 99 235);
}

HSL Color

.element {
  outline: 3px solid hsl(221 83% 53%);
}

Transparent Color

.element {
  outline: 3px solid rgb(37 99 235 / 50%);
}

Current Text Color

.element {
  color: purple;
  outline: 2px solid currentColor;
}

Focus Outline

.element:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Frequently Asked Questions

What does `outline-color` do in CSS?

The outline-color property defines the color of an element’s outline. The outline is drawn around the element and is separate from its border.

Why is my `outline-color` not working?

A common reason is that no visible outline-style has been specified. Try:

.element {
  outline-style: solid;
  outline-color: red;
}

or:

.element {
  outline: 2px solid red;
}

What is the default value of `outline-color`?

The initial value is:

outline-color: auto;

This allows the browser or user agent to determine an appropriate outline color.

Can I use hexadecimal colors?

Yes.

outline-color: #0066cc;

Can I use RGB?

Yes.

outline-color: rgb(0 102 204);

Can an outline be transparent?

Yes.

outline-color: transparent;

or:

outline-color: rgb(0 102 204 / 40%);

Does an outline affect element width?

No. An outline is not part of the normal CSS box model and does not normally change an element’s layout dimensions.

What is the difference between `outline-color` and `border-color`?

border-color controls the element’s border, which belongs to the box model. outline-color controls an outline drawn around the element and does not normally consume layout space.

Should I remove the outline from buttons?

Generally, you should not remove focus outlines unless you replace them with another clearly visible focus indicator. Keyboard users rely on focus styling to understand which control is active.

Can I use `currentColor`?

Yes.

button {
  color: blue;
  outline: 2px solid currentColor;
}

The outline will use the button’s computed text color.

Can `outline-color` be animated?

It can participate in CSS transitions between compatible color values.

button {
  outline: 2px solid transparent;
  transition: outline-color 0.2s ease;
}

button:hover {
  outline-color: blue;
}

Conclusion

CSS outline-color determines the color used for an element’s outline. It works together with outline-style and outline-width, while outline-offset controls the space between the outline and the border edge.

A simple declaration might look like:

.element {
  outline: 3px solid #2563eb;
}

For interactive interfaces, outline-color becomes especially important when creating visible keyboard focus indicators:

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

Unlike borders, outlines do not normally participate in the CSS box model, so they can highlight an element without changing its layout dimensions. Used carefully, outline-color is a simple but valuable CSS tool for both visual design and accessible interaction.

CSS Outline Color

What Is outline-color in CSS?

CSS outline-color Syntax

Basic Example

Important: outline-color Alone May Not Display an Outline

Values Supported by outline-color

Using Named Colors

Using Hexadecimal Colors

Using RGB Colors

Transparent Outline Colors

Using HSL Colors

Using currentColor

What Is the Default outline-color?

The invert Value

outline-color with outline-style

outline-color with outline-width

CSS outline Shorthand

Outline Color on Focus

Accessibility and Outline Color

Using outline-offset with Outline Color

Outline Color vs Border Color

Main Differences

Outline Color vs Box Shadow

Changing Outline Color on Hover

Form Validation Example

Using CSS Variables for Outline Colors

Outline Colors in Dark Mode

Transitioning Outline Color

Transparent Outline Technique

Using inherit

Using initial

Using unset

Using revert

Using revert-layer

Outline Color Does Not Affect Element Size

Outlines and the CSS Box Model

Practical Button Example

Practical Input Example

Changing Only the Outline Color

Using currentColor in Reusable Components

Common Mistakes

1. Setting only outline-color

2. Removing focus outlines completely

3. Choosing a low-contrast color

4. Using color as the only state indicator

5. Confusing outline with border

Best Practices

Complete Accessible Focus Example

outline-color Property Summary

outline-color vs Related Properties

Quick Examples

Red Outline

Blue Outline

Hex Color

RGB Color

HSL Color

Transparent Color

Current Text Color

Focus Outline

Frequently Asked Questions

What does outline-color do in CSS?

Why is my outline-color not working?

What is the default value of outline-color?

Can I use hexadecimal colors?

Can I use RGB?

Can an outline be transparent?

Does an outline affect element width?

What is the difference between outline-color and border-color?

Should I remove the outline from buttons?

Can I use currentColor?

Can outline-color be animated?

Conclusion

Share this:

Related Posts

Leave a ReplyCancel reply

Discover more from VastPedia

What Is `outline-color` in CSS?

CSS `outline-color` Syntax

Important: `outline-color` Alone May Not Display an Outline

Values Supported by `outline-color`

Using `currentColor`

What Is the Default `outline-color`?

The `invert` Value

`outline-color` with `outline-style`

`outline-color` with `outline-width`

CSS `outline` Shorthand

Using `outline-offset` with Outline Color

Using `inherit`

Using `initial`

Using `unset`

Using `revert`

Using `revert-layer`

Using `currentColor` in Reusable Components

1. Setting only `outline-color`

`outline-color` Property Summary

`outline-color` vs Related Properties

What does `outline-color` do in CSS?

Why is my `outline-color` not working?

What is the default value of `outline-color`?

What is the difference between `outline-color` and `border-color`?

Can I use `currentColor`?

Can `outline-color` be animated?