JavaScript Change the Border Style of HTML Element
To change the border style of a HTML Element using JavaScript, get reference to this HTML element, and assign required border style value to the element.style.borderStyle
property.
borderStyle property takes one of the following values.
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
In the following example, we will change the border style of HTML Element with id "myElement"
to "dotted"
, in JavaScript, using element.style.borderStyle
property.
example.html
<!DOCTYPE html> <html lang="en"> <head> <style> #myElement { border:3px solid red; width:100px; height:100px; } </style> <meta charset="utf-8"> </head> <body> <h2>Change Border Style 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.borderStyle = "dotted"; } </script> </body> </html>
Conclusion
In this JavaScript Tutorial, we learned how to change the border style of a HTML Element using JavaScript.