The outline CSS property draws a line around an element. Unlike the border property, the outline property is not considered part of the box model, so it does not affect the element’s dimensions. By default, the outline is drawn just outside the border edge.

• The outline property can be used on a block or an inline element.
• The outline property does not affect the position of the element. The line goes above of the element and does not influence any elements: siblings or parent.
• You can not select the side of element on which the line will be drawing. So you can not write: outline-bottom:black solid 2px; otuline-top: red solid 3px;

div.box-outline-basic {
width:30%;
    padding:20px;
    margin:5em auto;
    background:hsl(353, 72%, 45%);;
    outline:5px solid hsl(353, 100%, 6%);
}

Non-rectangular outline

The outline can be non-rectangular.

See the Pen outline non-rectangular by majadc (@majadc) on CodePen.

The recommended usage for the outline property is to apply it to elements that have focus or are active, in order to indicate to the user which element on the page currently has focus or is being interacted with.

:active {
    outline: medium solid red;
}
:focus {
    outline: medium solid green;
}

The outline property is the shorthand for following property:

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

<'outline-color'> sets ‘color’ or ‘invert’ value.
Invert vale – performs a color inversion of the background (testing and working in internet Explorer 11).

<'outline-style'> : auto | none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | initial | unset

<'outline-width'> : thin | medium | thick | inherit

<'outline-offset'>
Stetting this property on value different than ‘0’ moves the outline and drawn it beyond the border edge. Not working in Internet Explorer.

Using outline with border-radius

The outline takes shape of borders with the border-radius property set on it.

div.box-outline-border-radius {
    border-radius:50%;
    border:2px solid hsla(195, 72%, 45%, 1);;
    outline:5px solid hsl(353, 100%, 6%);
}

Using outline with the box-shadow

See the Pen outline with box-shadow by majadc (@majadc) on CodePen.

Resources

• MDN
• W3C Recomendation