CSS outline Property

An outline is a line that is drawn outside the borders. The outline is the same on all sides. An outline and a border are similar but there are many differences.

If you can make borders rounded with the help of the border-radius property, the outline property cannot be rounded.

The outline property allows to create multiple borders around an element.

The outline property is a shorthand for.

The outline-color property does not work if it is used alone.

The width and height of the element do not include the width of the outline. It must be specified separately.

Initial Value medium invert color
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Outline of the element is animatable.
Version CSS2
DOM Syntax object.style.outline = "#eee dashed 10px";

Syntax

outline: outline-width | outline-style | outline-color | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.dotted {outline:dotted;}
      p.dashed {outline: dashed;}
    </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>
  </body>
</html>

In the given example the outline-style of the first element is dotted, and the one of second element is dashed.

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: 1px solid #fc7f01;
      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>

Another example with the outline-color property. The outline is outside of the second element’s border:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.blue {
      outline-style: solid;
      outline-color: #1c87c9;
      }
      div.green {
      border: 1px solid black;
      outline-style: solid;
      outline-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
    <br>
    <div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>

Values

Value Description
outline-width Defines the width of the outline.
outline-style Defines the style of the outline.
outline-color Sets the color of the outline.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles