In this section, we will learn what the outline property is and how to use it in CSS.

Click here to run the first example.

Click here to run the second example.

CSS outline Property Definition and Usage

Other than content, padding and borders, an element has a line around itself that is known as an outline.

This outline is right next to the border of an element and using CSS, we can style this outline to become visible to users as well.

Outline is basically another way of styling an element and make more attractive, etc.

The CSS outline property is a shorthand property to set the values for the following properties:

• outline-width: The first value of the outline property sets the width of the target outline.
• outline-style: the second value of the outline property sets the style of the target outline.
• outline-color: the third value of the outline property sets the color of the target outline.

Note: You should know that the outline is not part of the total width or height of an element and therefore any width we set for this property will not take effect on the final width or height of the element.

CSS outline Property Syntax

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

CSS outline Property Value

The values we set for this property are the same values that we use for the `outline-width`, `outline-style`, and `outline-color` properties, respectively.

Example: outline in CSS

See the Pen outline in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.