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 JavaScript, the color property of an element is used to specify the color of an element’s border.
- border-color: To change the color of the borders, use the border-color property.
- border-width: The border’s width may be modified using the border-width property. It has a pixel setting.
- border-radius: The border-radius CSS property is used to round the corners of an element’s outer border edges.
Syntax:
element.style.borderColor
Example 1: In this following example, the JavaScript code now additionally locates the button element using its ID and uses the addEventListener function to add a click event listener to it. The event listener function’s code is called when the button is pressed, changing the div element’s border style to 3 pixels wide, solid, and green, and also we added a border-radius to round the solid line. To change the border to a new design or color, you may adjust the code inside the event listener function. And we added some style to the button to make it more attractive.
<!DOCTYPE html> <html>
<head>
<title>Change Border</title>
<style>
button {
margin-top: 0.5rem;
padding: 10px 10px 10px 10px;
background: crimson;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gfg">
<h1>Welcome to geeksforgeeks!!</h1>
<p>
A Computer Science portal for geeks. It
contains well written, well thought and
well explained computer science and
programming articles, quizzes and
practice/competitive programming/company
interview Questions.
</p>
</div>
<button id="changeBorder">
Change border
</button>
<script>
var gfg = document.getElementById("gfg");
var changeBorder =
document.getElementById("changeBorder");
changeBorder.addEventListener("click", function () {
gfg.style.border = "3px solid green";
gfg.style.borderRadius = "10px";
});
</script>
</body>
</html>
|
Output:
Example 2: In the following example there is three div. When the button is clicked javascript is going to execute and change the border styles of each div element also in this example div has different types of border-radius. The border-top, border-right, border-bottom, and border-left properties are used to set different border styles for each side of the border.
<!DOCTYPE html> <html>
<head>
<title>Change Border - Method 2</title>
<style>
.gfg {
margin-top: 20px;
}
button {
margin-top: 0.5rem;
padding: 10px 10px 10px 10px;
background: crimson;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gfg" id="gfg1">
<h3>
Welcome To GeeksForGeeks!!
</h3>
</div>
<div class="gfg" id="gfg2">
<h3>
Welcome To GeeksForGeeks!!
</h3>
</div>
<div class="gfg" id="gfg3">
<h3>
Welcome To GeeksForGeeks!!
</h3>
</div>
<button id="changeBorder">
Change Border
</button>
<script>
var gfg1 = document.getElementById("gfg1");
var gfg2 = document.getElementById("gfg2");
var gfg3 = document.getElementById("gfg3");
var changeBorder = document.getElementById("changeBorder");
changeBorder.addEventListener("click", function () {
gfg1.style.borderTop = "3px solid green";
gfg1.style.borderRight = "3px dotted green";
gfg1.style.borderBottom = "3px dashed #00cec9";
gfg1.style.borderLeft = "3px solid red";
gfg1.style.borderRadius = "10px";
gfg2.style.borderTop = "3px dashed #00cec9";
gfg2.style.borderRight = "3px solid red";
gfg2.style.borderBottom = "3px solid green";
gfg2.style.borderLeft = "3px dotted green";
gfg2.style.borderRadius = "20px";
gfg3.style.borderTop = "3px dotted green";
gfg3.style.borderRight = "3px dashed #00cec9";
gfg3.style.borderBottom = "3px solid red";
gfg3.style.borderLeft = "3px solid green";
gfg3.style.borderRadius = "30px";
});
</script>
</body>
</html>
|
Output: