How to Change Border Width of Div in JavaScript ?

Last Updated : 10 Jul, 2023

Div elements are essential in creating modern web applications, and manipulating their properties dynamically can enhance user experience. In this article, we’ll see how to change the border width of a div element using JavaScript.

The border-width property in CSS is used to specify the width of the border around an HTML element. It takes values in pixels, ems, rems, or percentages, and it can be set independently for each side of the border. To change the border width of a div element using JavaScript, we need to target the div element and set its border width property.

Syntax:

element.style.borderWidth = "px"

Example 1: In the following example, we first get the div element with the class name called card using its ID using the document.getElementById() method. We then set the borderWidth style property of the element to 5px using the style.borderWidth.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        .card {
            border: 1px solid green;
            padding: 10px;
            margin: 10px;
            width: 50%;
        }
    </style>
</head>
 
<body>
    <div class="card" id="myCard">
        <div class="card-body">
            <h1 class="card-title">
                Welcome To Geeksforgeeks!!
            </h1>
        </div>
    </div>
   
    <script>
        let myCard = document.getElementById("myCard");
        myCard.style.borderWidth = "5px";
    </script>
</body>
   
</html>

Output:

Example 2: In the following example, we first get the div element by its ID. We then set borderTopWidth to 2px, borderTopWidth to 4px, borderRightWidth to 8px, and borderLeftWidth to 12px.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        div {
            padding: 10px;
            width: 60%;
            border: 2px solid green;
            border-radius: 10px;
        }
    </style>
</head>
 
<body>
    <div id="gfg">
        <h1>Welcome To Geeksforgeeks!!</h1>
        <p>
            A Computer Science Portal for geeks.
            It contains well written, well thought 
            & well explained computer science & pro-
            gramming articles.
        </p>
    </div>
   
    <script>
        let myDiv = document.getElementById("gfg");
        myDiv.style.borderTopWidth = "2px";
        myDiv.style.borderRightWidth = "4px";
        myDiv.style.borderBottomWidth = "8px";
        myDiv.style.borderLeftWidth = "12px";
    </script>
</body>
   
</html>