outline

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%);
}
The basic outline around the div element.

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.

  Initial value Applies to Inherited Media Animatable
outline-color invert (if supported) | current color all elements no visual, interactive yes
outline-style none all elements no visual, interactive no
outline-width medium all elements no visual, interactive yes
outline-offset 0 all elements no visual, interactive yes

Using outline with border-radius

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

The outline around the div element
with the property border-radius sets to 50%.
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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.