CSS | outline-color Property

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;

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    outline-color-name

    Example: outline-color: #FF00FF;

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    outline-color-code

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    outline-color-rgb

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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;

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    outline-color-invert

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

    Example: outline-color: inherit;

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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


    My Personal Notes arrow_drop_up

    Student, BCA

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.