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>

(opens new window)

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

Remarks

outline is now described in Basic UI (opens new window), 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 (opens new window) 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:

• How to remove the border highlight on an input text element (opens new window)
• How to remove Firefox's dotted outline on BUTTONS as well as links? (opens new window)

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;