Javascript Reference - HTML DOM Style outlineStyle Property

The outlineStyle property sets or gets the style of the outline.

Browser Support


`outlineStyle`	Yes	9.0	Yes	Yes	Yes

Syntax

Return the outlineStyle property:

var v = object.style.outlineStyle;

Set the outlineStyle property:

object.style.outlineStyle=value;

Property Values

Value	Description
none	Default value. No outline.
hidden	Hiden outline
dotted	dotted outline
dashed	dashed outline
solid	solid line outline
double	double line outline
groove	Defines a 3D grooved outline.
ridge	Defines a 3D ridged outline.
inset	Defines a 3D inset outline.
outset	Defines a 3D outset outline.
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the outline style
CSS Version	CSS2

Example

The following code shows how to add a "dotted" outline.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   w  w w .  j a va2  s. c o  m-->
    border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.outlineStyle = "dotted";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the outline style.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w ww . j a va2 s  .c om-->
    border: 1px solid red;
    outline: green dotted thick;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">Change outline style</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.outlineStyle = "solid";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the outline style.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from www. j  a va 2s .  co m-->
    border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv" style="outline-style:dotted;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.outlineStyle);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to A demonstration of all the different values:


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--   w ww .j a va2s  .c  om-->
    border: 2px solid green;
    outline-color: red;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element</div>
<br>

<select onchange="myFunction(this);" size="10">
  <option>none</option>
  <option>hidden</option>
  <option>dotted</option>
  <option>dashed</option>
  <option>solid</option>
  <option>double</option>
  <option>groove</option>
  <option>ridge</option>
  <option>inset</option>
  <option>outset</option>
</select>

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myDiv").style.outlineStyle = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows: