CSS Outlines

Outlines are very similar to the borders but there are are some important differences in borders & outlines:

• An outline does not take up space.
• Outlines do not have to be rectangular.
• Outline is always the same on all sides; you cannot specify different values for different sides of the element.

We can use following properties:

• outline-width property is used to set the width of the outline.
• outline-style property is used to set the line style for the outline.
• outline-color property is used to set the color of the outline.

outline-width property
Its value should be a length or one of the values thin, medium, or thick.

example:
<p style="outline-width:thin; outline-style:dotted;outline-color:#00FF00">
This text is having thin outline.
</p>

<p style="outline-width:thick; outline-style:solid; outline-color:#FF0000">
This text is having thick outline.
</p>

<p style="outline-width:5px; outline-style:dashed; outline-color:#0000FF">
This text is having 5x outline.
</p>

This Result in

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.