CSS - outline-color Property

CSS outline-color property sets the color for an outline around an element. An outline is a line that is drawn around the border of an element. The outline-style property must be defined before using this property.

Syntax

outline-color: color | initial | inherit;

Property Values

Value	Description
Color	It sets the color of the outline. Different formats can be used (e.g. color names, rgb, hsl, hex etc.)
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Outline Color Property

The following examples explain the outline-color property with different values.

Outline Color Property with Color Names

The color of the outline of an element can be set using color names (e.g. red, yellow, gray etc.). Some color names have been used in the following example to set the outline color of elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         padding: 15px;
         text-align: center;
         font-size: 20px;
         background-color: lightblue;
         border: 4px dashed black;
         outline-width: 5px;
         outline-style: solid;
      }

      .first {
         outline-color: red;
      }

      .second {
         outline-color: blue;
      }

      .third {
         outline-color: green;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-color property
   </h2>
   <h4>
      outline-color: red
   </h4>
   <p class="first props">
      This paragraph has a black 
      border and red outline.
   </p>
   <h4>
      outline-color: blue
   </h4>
   <p class="second props">
      This paragraph has a black 
      border and blue outline.
   </p>
   <h4>
      outline-color: green
   </h4>
   <p class="third props">
      This paragraph has a black 
      border and green outline.
   </p>
</body>

</html>

Outline Color Property with Hexadecimal Values

The color of the outline of an element can be set using hexadecimal values (e.g. #26734d). Some hexadecimal values have been used in the following example to set the outline color of elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         padding: 15px;
         text-align: center;
         font-size: 20px;
         background-color: lightblue;
         border: 4px dashed black;
         outline-width: 5px;
         outline-style: solid;
      }

      .first {
         outline-color: #00b300;
      }

      .second {
         outline-color: #cc0000;
      }

      .third {
         outline-color: #cccc00;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-color property
   </h2>
   <h4>
      outline-color: #00b300
   </h4>
   <p class="first props">
      This paragraph has a black 
      border and greenish outline.
   </p>
   <h4>
      outline-color: #cc0000
   </h4>
   <p class="second props">
      This paragraph has a black 
      border and redish outline.
   </p>
   <h4>
      outline-color: #cccc0
   </h4>
   <p class="third props">
      This paragraph has a black 
      border and yellowish outline.
   </p>
</body>

</html>

Outline Color Property with RGB Values

The color of the outline of an element can be set using rgb values (e.g. rgb(38, 115, 77)). Some rgb values have been used in the following example to set the outline color of elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         padding: 15px;
         text-align: center;
         font-size: 20px;
         background-color: lightblue;
         border: 4px dashed black;
         outline-width: 5px;
         outline-style: solid;
      }

      .first {
         outline-color: rgb(230, 0, 115);
      }

      .second {
         outline-color: rgb(255, 153, 0);
      }

      .third {
         outline-color: rgb(102, 0, 204);
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-color property
   </h2>
   <h4>
      outline-color: rgb(230, 0, 115)
   </h4>
   <p class="first props">
      This paragraph has a black 
      border and pinkish outline.
   </p>
   <h4>
      outline-color: rgb(255, 153, 0)
   </h4>
   <p class="second props">
      This paragraph has a black 
      border and orange outline.
   </p>
   <h4>
      outline-color: rgb(102, 0, 204)
   </h4>
   <p class="third props">
      This paragraph has a black 
      border and violet outline.
   </p>
</body>

</html>

Outline Color Property with HSL Values

The color of the outline of an element can be set using hsl values (e.g. hsl(150, 50%, 30%)). Some hsl values have been used in the following example to set the outline color of elements.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         padding: 15px;
         text-align: center;
         font-size: 20px;
         background-color: lightblue;
         border: 4px dashed black;
         outline-width: 5px;
         outline-style: solid;
      }

      .first {
         outline-color: hsl(240, 20%, 45%);
      }

      .second {
         outline-color: hsl(60, 100%, 25%);
      }

      .third {
         outline-color: hsl(150, 50%, 30%);
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-color property
   </h2>
   <h4>
      outline-color: hsl(240, 20%, 45%)
   </h4>
   <p class="first props">
      This paragraph has a black 
      border and blueish outline.
   </p>
   <h4>
      outline-color: hsl(60, 100%, 25%)
   </h4>
   <p class="second props">
      This paragraph has a black 
      border and greenish outline.
   </p>
   <h4>
      outline-color: hsl(150, 50%, 30%)
   </h4>
   <p class="third props">
      This paragraph has a black 
      border and grayish outline.
   </p>
</body>

</html>

Supported Browsers

Property
outline-color	1.0	8.0	1.5	1.2	7.0

css_reference.htm

Print Page