X

Headline

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

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 a 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.

Practice Your Knowledge

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



Do you find this helpful?

Related articles