JavaScript – Change the Border Width of HTML Element

To change the border width of a HTML Element using JavaScript, get reference to the element, and assign required width value to the element.style.borderWidth property.

In the following example, we will change the border width of HTML Element with id "myElement" to "5px", in JavaScript, using element.style.borderWidth property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:2px solid red;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Border Width of HTML Element in JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.borderWidth = "5px";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the border width of a HTML Element using JavaScript.