CSS outline

The CSS outline property is used to create a line outside the border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 4px solid red; border: 4px solid blue;}
   </style>
</head>
<body>

   <div>The outline Property</div>
   
</body>
</html>

Output

The outline Property

Important - Outline may overlap other content, as outline is not a part of specified element's dimension. It is created outside the border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 18px dotted red; border: 4px solid blue;}
   </style>
</head>
<body>

   <div>The outline Property Example</div>
   fresherearth
   
</body>
</html>

Output

The outline Property Example

fresherearth

See the text fresherearth right after the DIV that has an outline, gets overlapped. Here is another example, to put the text fresherearth inside an element say P tag:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 34px dotted red; border: 4px solid blue;}
   </style>
</head>
<body>

   <div>The outline Property Example</div>
   <p>fresherearth</p>
   
</body>
</html>

Output

The outline Property Example

fresherearth

Since P tag creates little margin to top and bottom, therefore we are seeing the difference between this and previous example. But the thing is, I only want to show you, how an outline may overlap other content.

CSS outline Syntax

The syntax of outline property in CSS, is:

outline: outline-width outline-style outline-color;

Therefore outline property can also be called/used as shorhand for following properties:

outline-width - defines the width of line created outside the border of an element
outline-style - defines the style of line created outside the border of an element. The parameter is required
outline-color - defines the color of line created outside the border of an element

The initial and inherit are the two keywords that can also be used to define the outline property.

Note - The initial is used when we need to use the default value, whereas the inherit is used to use the value inherited by the parent element.

Note - To create space between outline and border of an element, use outline-offset property.

CSS outline Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin: 20px 10px;}
      div.a{outline: dotted;}
      div.b{outline: solid red;}
      div.c{outline: 4px dotted;}
      div.d{outline: 4px dashed red;}
   </style>
</head>
<body>

   <div class="a">outline: dotted</div>
   <div class="b">outline: dotted red</div>
   <div class="c">outline: 4px dotted</div>
   <div class="d">outline: 4px dashed red</div>
   
</body>
</html>

Output

outline: dotted

outline: dotted red

outline: 4px dotted

outline: 4px dashed red

CSS Online Test

« Previous Tutorial Next Tutorial »