Open In App

CSS outline-color Property

Last Updated : 28 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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;

HTML
<!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:Example: outline-color: #FF00FF;  html
<!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:Example: outline-color: rgb(0, 0, 255);  html
    
        
<!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%);

HTML
<!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;

HTML
<!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>


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

Example: outline-color: inherit;

HTML
<!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
  • Opera 7
  • Safari 1.2

Similar Reads