CSS | outline-style Property

The outline-style property in CSS is used to set the appearance of the outline of an element. The outline and border of an element are similar, but not the same. The outline does not take space and it is drawn outside the border of an element. Also, the outline is drawn around all the four sides of the element by default, and there is no way to alter this.

Syntax:

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;

Property Values:



  • auto: It sets the outline of an elements through the browser.

    Syntax:

    outline-style: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-auto

  • none: It is the default value and it sets the outline width to zero. Hence, it is not visible.

    Syntax:

    outline-style: none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-none

  • dotted: It is used to set a series of dots around the element as outline.

    Syntax:

    outline-style: dotted;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-dotted

  • dashed: It is used to set a series of dashed line segment around the element as outline.

    Syntax:

    outline-style: dashed;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-dashed

  • solid: It is used to set solid line segment around the element as outline.

    Syntax:

    outline-style: solid;

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-solid

  • double: It sets a doubled line segments around the element as outline. The width of the outline is equal to the sum of width of the individual line segments and space between them.

    Syntax:

    outline-style: double;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-double

  • groove: It sets grooved line segments around the element as the outline, which makes feel that it is carved.

    Syntax:

    outline-style: groove;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-groove

  • ridge: It sets ridged line segments around the element as outline, which makes feel that it is extruding. It is opposite to that of a groove.

    Syntax:

    outline-style: ridge;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-ridge

  • inset: It sets embedded line segments around the element as the outline, which makes us feel that it is fixed in the display.

    Syntax:

    outline-style: inset;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-inset

  • outset: It sets line segments around the element which appears to be coming out, as outline. It is opposite of inset.

    Syntax:

    outline-style: outset;

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-outset

  • initial: It is used to set outline-style property to its default value. It sets the width of the outline to zero. Hence, the outline is not visible.

    Syntax:

    outline-style: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-initial

  • inherit: It makes the outline-style property to be inherited from its parent element.

    Syntax:

    outline-style: inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    CSS Property | outline-style-inherit

Supported Browsers: The browser supported by outline-style property are listed below:

  • Google Chrome 1.o
  • Internet Explorer 8
  • Firefox 1.5
  • Opera 7.0
  • 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.