HTML DOM Style outlineWidth Property

HTMLWeb DevelopmentFront End Technology

The DOM style outlineWidth property returns and modify the width of the outline around an element in an HTML document.


Following is the syntax −

  • Returning outlineWidth
  • Modifying outlineWidth = “value”


Let us see an example of style outlineWidth property −

 Live Demo

<!DOCTYPE html>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   p {
      background-color: seagreen;
      height: 200px;
      width: 200px;
      outline: 2px solid #000;
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
<h1>DOM Style outlineWidth Property Example</h1>
<button onclick="add()" class="btn">Add outline</button>
   function add() {
      document.querySelector('p').style.outlineWidth = "5px";


This will produce the following output −

Click on “Add outline” button to change the width of the outline around green box.

Updated on 01-Jul-2020 12:15:09