CSS - outline-width Property

Quiz

CSS outline-width property defines the width of the outline around an element. An outline is a line that is drawn outside the border of an element.

Syntax

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

Property Values

Value	Description
medium	It sets a medium width of the outline. Default.
thin	It sets a thin outline.
thick	It sets a thick border.
length	The thickness of the outline is given in length units (e.g. px, em, rem etc.)
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Outline Width Property

The following examples explain the outline-width property with different values.

Outline Width Property with Length Values

The width of the outline of an element can be set using length units (e.g. px, em, rem etc.). In the following example, 'px' and 'em' values have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
      }

      .ex1 {
         outline-width: 6px;
      }

      .ex2 {
         outline-width: 1em;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: 6px
   </h4>
   <div class="example ex1">
      This div has outline-width: 6px 
   </div>
   <h4>
      outline-width: 1em
   </h4>
   <div class="example ex2">
      This div has outline-width: 1em 
   </div>
</body>

</html>

Outline Width Property with Thin Value

To set a thin width to the outline of an element, we use the thin value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thin
   </h4>
   <div class="example">
      This div has outline-width: thin 
   </div>
</body>

</html>

Outline Width Property with Medium Value

To set a medium width to the outline of an element, we use the medium value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: medium
   </h4>
   <div class="example">
      This div has outline-width: medium
   </div>
</body>

</html>

Outline Width Property with Thick Value

To set a thick width to the outline of an element, we use the thick value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thick
   </h4>
   <div class="example">
      This div has outline-width: thick
   </div>
</body>

</html>

Supported Browsers

Property
outline-width	1.0	8.0	1.5	1.2	7.0

css_reference.htm

Print Page