CSS outline-color

The CSS outline-color property is used to color the line created outside the border of an element, using either outline or outline-style. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline-style: dotted; outline-color: red;}
   </style>
</head>
<body>

   <div>fresherearth</div>
   
</body>
</html>

Output

fresherearth

CSS outline-color Syntax

The syntax of outline-color property in CSS, is:

outline-color: x;

The value of x should be any of the following:

color - used to define custom color for the line created outside the border of an element
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS outline-color Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{border: 5px dotted blue;
         outline: 8px solid; outline-color: red;}
      p{outline-style: solid; outline-color: coral;}
   </style>
</head>
<body>

   <h2>The outline-color Property</h2>
   <p>This is an example of outline-color property.</p>
   
</body>
</html>

Output

The outline-color Property

This is an example of outline-color property.

CSS Online Test

« Previous Tutorial Next Tutorial »