The outline Css property draws the line around the element. The outline property is similar to the border property but is not a part of box model like the border property so it’s not a part of the element’s dimensions. By default, the outline is drawn starting 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. For example the Opera draws non-rectangular shape if the outline is used for the inline element with text with different font size or when the text is folding. It happens in the Chrome and Internet Explorer too. Firefox draws rectangular shape.

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

Recommend usage for outline is to apply it around elements to tell the user which element on the page has the focus or the active.

: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