JavaScript Code

How to change border of a div in JavaScript?

Tutorials using JS

Change border of a div in JavaScript

In this tutorial, you shall learn how to change the border of a div element using JavaScript.


To set or change the border of a div element using JavaScript, we can use property. Get the div element and set its style.border property with the required border value. = '2px solid red';


When user clicks on the Click me button, we get the div element with the id myDiv and set its border to 5px solid red using style.border property.

<!DOCTYPE html>
<h1>JavaScript Tutorial</h1>
<button id="myBtn">Click me</button>
<div id="myDiv">About</div>

#myDiv {
  width: 100px;
  height: 100px;
  background: yellow;

document.getElementById("myBtn").addEventListener("click", function() {
    //get the div element
    const myDiv = document.getElementById("myDiv");
    //set the border of the div = '5px solid red';


Copyright @2022