Change the Border of HTML Element in JavaScript
Last Updated :
01 Jun, 2023
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.
HTML
<!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.
HTML
<!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:
Similar Reads
How to Change Border Width of Div in JavaScript ? 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
2 min read
How to Create Table Border in HTML ? In HTML, we can represent the data in the tabular format by using the <table> tag. We can customize the table by creating a border with different widths and colors. Below are the approaches to create a Table Border in HTML: Table of Content Using HTML Table Tag AttributesUsing HTML Inline Styl
2 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 borderImageRepeat Property The borderImageRepeat style property in HTML DOM is used to set or return the borderImageRepeat property. It specifies whether the border image should repeat to fill the area, stretched to fill the area, set to the initial value, inherit property from its parent, etc. Depending on the need it will b
4 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
HTML | DOM Style borderImageSlice Property The borderImageSlice property is used to specify the inward offsets of the image border. The user can specify the value of this property in terms of percentage, number or global values. Syntax: object.style.borderImageSlice = "number|%|fill|initial|inherit" Return Values: It returns a string value,
3 min read