CSS Properties

An outline is a line that is drawn around elements, outside the borders. Outlines never take up space, as they are drawn outside of an element's content.

• outline-color
• outline-style
• outline-width
• outline

outline-style

This property is used to specify the style of an outline. We can set this property to none (default), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

Example:

div {
outline-style: solid;
}

outline-color

This property is used to specify the color of an outline. We can set this property to invert (default) or color.

Example:

div {
outline-style: solid;
outline-color: red;
}

outline-width

This property is used to specify width of an outline. We can set this property to medium (default), thin, thick, length.

Example:

div {
outline-style: solid;
outline-width: 5px;
}

outline

This is shorthand of other outline properties.

Syntax:

Selector {
outline: outline-color outline-style outline-width;
}

Example:

div {
outline: red solid 3px;
}

This property is used to add space between an outline and the edge or border of an element.

Example:

div {
outline-offset: 5px;
}