How to Change Border Width of Div in JavaScript ? Last Updated : 10 Jul, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to change Input box borders after filling the box using JavaScript ? S saurabhkumarsharma05 Follow Improve Article Tags : HTML HTML-Questions JavaScript-Questions Similar Reads Change the Border of HTML Element in JavaScript In this article, we will see how to change the Border of HTML element using JavaSCript. To change the border of an element, first, we select the element, and then use HTML DOM border style property to change the border. The CSS border properties are given below: border-style: The border-style In Jav 3 min read How to change Input box borders after filling the box using JavaScript ? In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchang 2 min read How to Get the Width of Hidden Element in jQuery? An HTML element can be hidden with the help of the .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery.Two kinds of width are defined with every HTML element i.e, innerWidth and the outerWidth of the e 3 min read How to Set a Border for an HTML Div Tag ? Borders help us make things look good on websites, this plays an important role in the external view of a website. In HTML and CSS, we have different ways to add borders, making it easier for developers to create attractive web pages that look neat and organized. Table of Content Inline StylesIntern 4 min read HTML DOM Style borderImage Property The DOM Style borderImage Property in HTML is a shorthand property used for setting the borderImageSource, borderImageSlice, borderImageWidth,borderImageOutset, and borderImageRepeat properties. Syntax: It is used to return the borderImage property. object.style.borderImageIt is used to set the bord 2 min read HTML | DOM Style borderSpacing Property The DOM Style borderSpacing Property is used to set or return the spacing between the cells in a table. Syntax: To get the borderSpacing propertyobject.style.borderSpacingTo set the borderSpacing propertyobject.style.borderSpacing = "length | initial | inherit" Return Values: It returns a string val 3 min read Like