W3docs
en
Log in

CSS outline-width Property

The outline-width CSS property is used to set an outline’s width of an element. See property values and examples.

The outline-width property defines the width of an outline. An outline is a line which is drawn around an element. But it is different from the border property.

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.

This property accepts the following values: medium, thin, thick, length, initial, inherit, revert, and unset.

Info

Before setting the outline-width, you should set the outline-style property to a value other than none for the width to be visible.

Initial Valuemedium
Applies toAll elements.
InheritedNo.
AnimatableYes. The width of the outline is animatable.
VersionCSS2
DOM SyntaxObject.style.outlineWidth = "thick";

Syntax

CSS outline-width syntax

outline-width: medium | thin | thick | length | initial | inherit | revert | unset;

Multiple values example

CSS outline-width code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-width: 5px;
      }
      .p2 {
        outline-style: solid;
        outline-width: 0.4em;
      }
      .p3 {
        outline-style: solid;
        outline-width: thin;
      }
      .p4 {
        outline-style: solid;
        outline-width: medium;
      }
      .p5 {
        outline-style: solid;
        outline-width: thick;
      }
      .p6 {
        outline-style: solid;
        outline-width: 0.1cm;
      }
      .p7 {
        outline-style: solid;
        outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Outline-width property example</h2>
    <p class="p1">This is a paragraph with outline set to 5px.</p>
    <p class="p2">This is a paragraph with outline set to 0.4em.</p>
    <p class="p3">This is a paragraph with outline set to thin.</p>
    <p class="p4">This is a paragraph with outline set to medium.</p>
    <p class="p5">This is a paragraph with outline set to thick.</p>
    <p class="p6">This is a paragraph with outline set to 0.1cm.</p>
    <p class="p7">This is a paragraph with outline set to 1 mm.</p>
  </body>
</html>
Try it Yourself »

Result

CSS outline-width property

In the following example, the first element does not have a border, the second one has. Notice that the outline of the second element is outside of its border.

Outline with a border

CSS outline-width another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        outline-style: solid;
        outline-width: thick;
      }
      div.ex2 {
        border: 2px solid #1c87c9;
        outline-style: solid;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Try it Yourself »

Basic outline example

Example of the CSS outline-width property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        outline-style: dotted;
        outline-width: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Try it Yourself »

Combining outline-width and outline-style

Example of the CSS outline-width property with the outline-style property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        outline-style: dashed;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
mediumDefines a medium outline. This is the default value of this property.Play it »
thinDefines a thin outline.Play it »
thickDefines a thick outline.Play it »
lengthDefines the thickness of outline.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.
revertReverts the property to the value set by the user agent or previous cascade.
unsetResets the property to its inherited value or initial value, depending on inheritance.

Practice

Practice

What are the possible values for the 'outline-width' property in CSS?