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.

The outline-style property has the following values:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
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

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

In the following example where all three outline properties are included.

Example

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

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.

Practice Your Knowledge

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



Do you find this helpful?

Related articles