<!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
>