Outlines

Syntax

  • outline: outline-color outline-style outline-width | initial | inherit;
  • outline-width: medium | thin | thick | length | initial | inherit;
  • outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Parameters

ParameterDetails
dotteddotted outline
dasheddashed outline
solidsolid outline
doubledouble outline
groove3D grooved outline, depends on the outline-color value
ridge3D ridged outline, depends on the outline-color value
inset3D inset outline, depends on the outline-color value
outset3D outset outline, depends on the outline-color value
noneno outline
hiddenhidden outline

Remarks

outline is now described in Basic UI, a CSS Module Level 3 (it was already described in REC CSS2.1)


Outline property is defined by default in browsers for focusable elements in :focus state.
It shouldn't be removed, see http://outlinenone.com which states:

What does the outline property do?

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people. (…)

Interesting related examples on Stack Overflow:

outline-style

The outline-style property is used to set the style of the outline of an element.

p {
  border: 1px solid black;
  outline-color:blue;
  line-height:30px;
}
.p1{
  outline-style: dotted;
}
.p2{
  outline-style: dashed;
}
.p3{
  outline-style: solid;
}
.p4{
  outline-style: double;
}
.p5{
  outline-style: groove;
}
.p6{
  outline-style: ridge;
}
.p7{
  outline-style: inset;
}
.p8{
  outline-style: outset;
}

HTML

<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>

enter image description here

Overview

Outline is a line that goes around the element, outside of the border. In contrast to border, outlines do not take any space in the box model. So adding an outline to an element does not affect the position of the element or other elements.

In addition, outlines can be non-rectangular in some browsers. This can happen if outline is applied on a span element that has text with different font-size properties inside it. Unlike borders, outlines cannot have rounded corners.

The essential parts of outline are outline-color, outline-style and outline-width.

The definition of an outline is equivalent to the definition of a border:

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

outline: 1px solid black;