CSS Outline

Last Updated : 11 Jul, 2025

CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.

Syntax

selector{
 outline: outline-width outline-type outline-color;
 /*outline: 2px solid grey;*/
}

Example: This example uses the outline property to create a dashed blue outline.

Output:

👁 CSS-Outline-example-output

CSS Outline Example output

CSS outline properties can be categorized into 4 types, namely, Outline-style, Outline-color, Outline-width & Outline-offset. We will discuss all the types of outline properties sequentially through the examples.

CSS Outline Properties

There are lots of properties comes under the CSS outline collection all of them are well described with the example.

Table of Content

Outline-style

The outline-style property sets the appearance of the outline of an element. Any other outline property cannot be accessed without setting the outline-style. If absent, the default style will be set to none.

Syntax

outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Outline-color

The outline-color property sets the color of an element's outline. The color can be set by its name, an RGB value, or a hex value. If absent, the default color will be the current color of the element.

Syntax

outline-color: <color> | invert | inherit;

Example: This example illustrates the Outline property where the color is set to the specific color value and outline style is solid.

Output:

👁 CSS outline color and style example output

Outline-width

Outline-width is used to specify the width of this outline for a specific element. The width of the outline can be set by specifying the size of the width in px, cm, pt, etc, or by using terms like a thin, thick, medium. If absent then the default width will be the medium.

Syntax:

outline-width: medium|thin|thick|length|initial|inherit;

Outline-offset

Outline-offset Property sets the amount of space between an outline and the edge or border of an element. An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.

Syntax: