---
title: CSS Outline Color
description: "## SS Outline Color The `outline-color` property is used to set the color of the outline. The color can be set by: - name – specify a color name, like “red” - HEX – specify a hex value, like “#ff0000” - RGB…"
url: "https://apprentice.mn/docs/css-outline-color/"
updated: "2021-05-08"
category: CSS
---

# CSS Outline Color

## SS Outline Color

The `outline-color` property is used to set the color of the outline.

The color can be set by:

- name – specify a color name, like “red”
- HEX – specify a hex value, like “#ff0000”
- RGB – specify a RGB value, like “rgb(255,0,0)”
- HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
- invert – performs a color inversion (which ensures that the outline is visible, regardless of color background)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

The outline-color property is used to set the color of the outline.

A solid red outline.

A dotted blue outline.

An outset grey outline.

     `p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}`

## HEX Values

The outline color can also be specified using a hexadecimal value (HEX):

     `p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}`

## RGB Values

Or by using RGB values

     `p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}`

## HSL Values

You can also use HSL values:

     `p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}`

## Invert Color

The following example uses `outline-color: invert`, which performs a color inversion. This ensures that the outline is visible, regardless of color background:

## Using outline-color:invert

A solid invert outline.

     `p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}`               [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline-color%2F&linkname=CSS%20Outline%20Color)[https://www.addtoany.com/share](https://www.addtoany.com/share)