Skip to main content

CSS Outline

The outline property is used to create an outline around an element. It is similar to the border property, but it is not a part of the element's box model, which means it does not affect the layout of the content or change the dimensions of the element.

The outline property can be used in several ways:

Basic Outline​

The simplest use of the outline property is to create a basic outline around an element.

As an example:

outline: 1px solid black;
  • This creates a solid black outline that is 1 pixel wide.

Outline Color​

You can set the color of the outline using the outline-color property.

As an example:

outline: 1px solid;
outline-color: red;
  • This creates a 1 pixel wide solid red outline.

Outline Width​

You can set the width of the outline using the outline-width property.

As an example:

outline: solid red;
outline-width: 3px;
  • This creates a 3 pixel wide solid red outline.

Outline Style​

You can set the style of the outline using the outline-style property.

As an example:

outline: 3px dashed blue;
outline-style: double;
  • This creates a double blue dashed outline that is 3 pixels wide.

Outline Offset​

You can set the distance between the element and the outline using the outline-offset property.

As an example:

outline: 3px solid green;
outline-offset: 5px;
  • This creates a 3 pixel wide solid green outline that is 5 pixels away from the element.

Shortcut​

You can also use the outline property as a shortcut for all of the above properties.

As an example:

outline: 2px dotted orange;
  • This creates a 2 pixel wide dotted orange outline.