Javascript DOM CSS Style outlineWidth Property

Introduction

Change the width of the outline of a <div> element: 

document.getElementById("myDiv").style.outlineWidth = "10px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {//w  w  w .j a v  a2 s  .  c om
  border: 1px solid red;
  outline-style: dotted;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Change outline width</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.outlineWidth = "10px";
}
</script>

</body>
</html>

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

An outline is a line around an element.

It is displayed around the margin of the element.

The outline is not a part of the element's dimensions.

The element's width and height properties do not contain the width of the outline.

Property Values

Value Description
thina thin outline
medium a medium outline. default
thick a thick outline
length The width of the outline in length units
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The outlineWidth property returns a String representing the width of an element's outline.




PreviousNext

Related