X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS outline-style Property

The outline-style property defines the style of an outline.

It is similar to the border property but there is a difference. The outline is outside of an element’s border and it does not take space. It is drawn around an element’s four sides by default.

The outline-style property has the following values:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

The width and height properties of an element do not include the outline width because the outline is not considered a part of the element’s dimensions.

Initial Value none
Applies to All elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.outlineStyle = "dotted"

Syntax

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

Example of the outline-style property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1{
      outline-style: solid;
      }
      .p2{
      outline-style: dashed;
      }
      .p3{
      outline-style: dotted;
      }
      .p4{
      outline-style: double;
      }
      .p5{
      outline-style: none; /*hidden*/
      }
      .p6{
      outline-style: groove;
      outline-color: #ccc;
      }
      .p7{
      outline-style: ridge;
      outline-color: #ccc;
      }
      .p8{
      outline-style: inset;
      outline-color: #ccc;
      }
      .p9{
      outline-style: outset;
      outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="p1">This is a paragraph with outline set to solid.</p>
    <p class="p2">This is a paragraph with outline set to dashed.</p>
    <p class="p3">This is a paragraph with outline set to dotted.</p>
    <p class="p4">This is a paragraph with outline set to double.</p>
    <p class="p5">This is a paragraph with outline set to none.</p>
    <p class="p6">This is a paragraph with outline set to groove.</p>
    <p class="p7">This is a paragraph with outline set to ridge.</p>
    <p class="p8">This is a paragraph with outline set to inset.</p>
    <p class="p9">This is a paragraph with outline set to outset.</p>
  </body>
</html>

Example of the outline-style property with all values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.dotted {outline: 4px dotted gray;}
      p.dashed {outline: 0.2em dashed rgb(142,191,66);}
      p.solid {outline: 4px solid #ccc;}
      p.double {outline: 4px double #000;}
      p.groove {outline: 4px groove #666;}
      p.ridge {outline: thick ridge #1c87c9;}
      p.inset {outline: medium inset #1c87c9;}
      p.outset {outline:  4px outset #1c87c9;}
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="dotted">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
    <p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
  </body>
</html>

Example of the outline-style property with the groove value:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #7f7fa7;
      text-align: center; 
      outline-width: 8px; 
      outline-style: groove; 
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to groove.</p>
  </body>
</html>

Example of the outline-style property with the ridge value:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #69afad;
      text-align: center; 
      outline-width: 8px; 
      outline-style: ridge; 
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Example of the outline-style property with the inset value:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #69afad;
      text-align: center; 
      outline-width: 8px; 
      outline-style: inset;  
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Example of the outline-style property with the outset value:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #69afad;
      text-align: center; 
      outline-width: 8px; 
      outline-style: outset;  
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Example of the outline-style property with the dotted value:

Example of the outline-style property with the dotted value:
<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #69afad;
      text-align: center; 
      outline-width: 4px; 
      outline-style: dotted;  
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Example of the outline-style property with the dashed value:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p { 
      color: #69afad;
      text-align: center; 
      outline-width: 4px; 
      outline-style: dashed;  
      padding:10px;
      } 
    </style>
  </head>
  <body>
    <h1>Outline property example</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

Values

Value Description
none Will show no outline. This is the default value of this property.
hidden Defines a hidden outline.
dotted The outline is specified as a series of dots.
dashed The outline is specified as a series of dashes.
solid The outline is specified as a solid lines.
double The outline is specified as a double solid lines.
groove Specifies a 3D grooved outline.
ridge Specifies a 3D ridged outline.
inset Specifies an embedded outline.
outset Specifies an embossed outline.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

1.0+ 12.0+ 1.5+ 1.2+ 7.0+

Practice Your Knowledge

Which of the followings isn't a value of outline-style property?



Do you find this helpful?

Related articles