CSS outline-color Property

Read

Discuss

The outline-color property of CSS sets the outline color of an element.

Syntax

outline-color: <color> | invert | inherit;

Property Value:

<color>: It sets the outline color to any valid CSS color.

Example: outline-color: black;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
            outline-width: 5px; 
            outline-style: dashed; 
            /* CSS property for outline-color */ 
            outline-color: black; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: black;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-name

Example: outline-color: #FF00FF;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
            outline-width: 5px; 
            outline-style: dashed; 
            /* CSS property for outline-color */ 
            outline-color: #FF00FF; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: #FF00FF;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-code

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
            outline-width: 5px; 
            outline-style: dashed; 
            /* CSS property for outline-color */ 
            outline-color: rgb(0, 0, 255); 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: rgb(0, 0, 255);-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-rgb

Example: outline-color: hsl(0, 100%, 50%);

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color: green; 
            text-align: center; 
            outline-width: 5px; 
            outline-style: dashed; 
            /* CSS property for outline-color */ 
            outline-color: hsl(0, 100%, 50%); 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: hsl(0, 100%, 50%);-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-hsl

invert: It set the outline color to a color which is inverse of the background, which ensures the outline will always be visible. Note: It is not supported by all browsers.

Example: outline-color: invert;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            border: 5px solid yellow; 
            text-align: center; 
            outline-width: 5px; 
            outline-style: solid; 
            /* CSS property for outline-color */ 
            outline-color: invert; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: invert;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-invert

Inherit: It sets the outline color according to outline-color property inherited from its parent element.

Example: outline-color: inherit;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        body { 
            outline-color: red; 
        } 
          
        h1 { 
            text-align: center; 
            outline-width: 5px; 
            outline-style: solid; 
            /* CSS property for outline-color */ 
            outline-color: inherit; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color: inherit;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html> 

Output:
outline-color-inherit

Supported Browsers: The outline-color property of CSS is supported by the following browsers:

Chrome 1
Edge 12
Firefox 1.5
Internet Explorer 8
Opera 7
Safari 1.2

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Jun, 2023

CSS order property

CSS outline-offset Property

CSS outline-color Property

Please Login to comment...