Javascript Reference - HTML DOM Style outlineWidth Property

The outlineWidth property sets or gets the width of the outline around an element.

Browser Support


`outlineWidth`	Yes	9.0	Yes	Yes	Yes

Syntax

Return the outlineWidth property:

var v = object.style.outlineWidth

Set the outlineWidth property:

object.style.outlineWidth='thin|medium|thick|length|initial|inherit'

Property Values

Value	Description
thin	thin outline
medium	Default value. medium outline.
thick	thick outline
length	Set outline width in length units
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	medium
Return Value:	A string representing the outline width
CSS Version	CSS2

Example

The following code shows how to change the outline width.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w  ww  .ja v a  2 s .c  om-->
    border: 1px solid red;
    outline: thin solid green;
}
</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.outlineWidth = "10px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the outline width to "thick".


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   w ww  . ja  v a2 s.co m-->
    border: 1px solid red;
    outline: thin solid green;
}
</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.outlineWidth = "thick";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the outline width.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--  w ww  .  j a  v  a2 s.com-->
    border: 1px solid red;
    outline: dotted green;
}
</style>
</head>
<body>
<div id="myDiv" style="outline-width:10px;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.outlineWidth);
}
</script>

</body>
</html>

The code above is rendered as follows: