outline

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

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.

  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 does not take 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.