Open In App

CSS outline-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


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: 

html




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


Output:

 CSS Property | outline-style-inherit

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

  • Google Chrome 1.0
  • Edge 12
  • Internet Explorer 8
  • Firefox 1.5
  • Opera 7.0
  • Safari 1.2


Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads