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;

Basic styles for all examples:

div.box-outline {
    width:30%;
    padding:20px;
    margin:5em auto;
}
div.box-outline-basic {
    background:#FFB7C5;
    outline:#4BB29E solid 5px;
}
The basic outline around the div element.
  • 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.
div.box-outline-non-rectangular {
    width:20%;	
}
div.box-outline-non-rectangular span {
    outline:#4BB29E solid 2px;
}
The span element is broken across several lines, the outline should be an outline or minimum set of outlines that encloses all the element’s boxes.
div.box-outline-non-rectangular em {
    font-size:2em;
}
The span element is broken across several lines, the outline should be an outline or minimum set of outlines that encloses all the element’s boxes.
  • 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 #FFB7C5;
    outline:#4BB29E solid 5px;
}

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

Example of using outline-offset

The outline with the offset around the div element.
div.box-outline-offset {
    background:#FFB7C5;
    outline:#4BB29E solid 5px;
    outline-offset: 30px;
}

Example of the outline around the element with the box-shadow property

The outline around the div element with the shadow.
div.box-outline-shadows {
    outline:rgba(75, 178, 158, 0.4) solid 20px;
    box-shadow:30px 30px 30px #62A2BF;
}

 

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;
}

Resources

Browser compatibility

outline

Internet Explorer
1.0
Firefox
1.8
Chrome
8.0
Safari
1.2
Opera
9.5
Mobile
Safari Mobile
3.1
Android
1.0
Chrome Mobile
working
IE Phone
8.0
Opera Mini
not workin
Opera Mobile
6.0
Notes

outline-offset not working in Internet Explorer