CSS outline-width Property

The outline-width defines the width of an outline.

It has the following values: medium, thick, thin.

You have to set the outline-style property first before setting the outline-width.

Initial Value medium
Applies to All elements.
Inherited No.
Animatable Yes. The width of the outline is animatable.
Version CSS2
DOM Syntax Object.style.outlineWidth = "thick";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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.5em.</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>

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

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>

Values

Value Description
medium Defines a medium outline. This is the default value of this property.
thin Defines a thin outline.
thick Defines a thick outline.
length Defines the thickness of outline.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.




Related articles