outline-style

div.test { outline-color: red;}

Value	Description
none	No outline is drawn. This is the initial value.
solid	The outline is drawn as a single solid line.
dashed	The outline is drawn as a dashed line with larger gaps.
dotted	The outline is drawn as a dotted line with smaller gaps.
double	The outline is drawn as two lines.
groove	The outline appears carved into the page. This is the reverse of 'ridge'.
ridge	The outline appears raised from the page. This is the reverse of 'groove'.
inset	The outline appears embedded into the page. This is the reverse of 'outset'.
outset	The outline appears to pop out from the page. This is the reverse of 'inset'.

※ The samples below have 'outline: 10px red' specified before the 'outline-style' property.

<div style="outline: 10px red; outline-style: none; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: solid; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: dashed; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: dotted; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: double; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: groove; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: ridge; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: inset; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

<div style="outline: 10px red; outline-style: outset; width: 90%; height: 100px; margin: 0 auto;">This is a div element with width 90% and height 100px.</div>

※ Version data is based on MDN.

Specifies the style of the outline. Unlike the 'border' property, outlines do not have separate top, right, bottom, and left sides.

The outline is a border drawn outside the element's border area — not inside. It corresponds to the outside of the 'border-top', 'border-right', 'border-bottom', and 'border-left' areas shown in the box model diagram below.

<div style="border: solid 5px #000; outline: solid 5px; outline-color: red; height: 100px;">This is a div element with height 100px. You can see a red outline drawn around the black border.</div>

Unlike borders, outlines have no concept of size and take up no space. This means you can draw a border around content without affecting the layout of surrounding elements.

<style scoped>
	div:hover {border: solid 5px red;}
</style>
<p>The following sample shows how a border affects surrounding elements.</p>
<div style="height: 100px; background-color: yellow;">This is a div element with height 100px. Try hovering over this element. The border causes the element to change size, which affects the surrounding elements.</div>
<p style="height: 100px; background-color: aqua";>This is a p element.</p>

<style scoped>
	div:hover {outline: solid 5px red;}
</style>
<p>The following sample shows how an outline does not affect surrounding elements.</p>
<div style="height: 100px; background-color: yellow;">This is a div element with height 100px. Try hovering over this element. An outline is drawn but it does not affect the surrounding elements.</div>
<p style="height: 100px; background-color: aqua";>This is a p element.</p>