How to set the color of an element border with JavaScript ?

Last Updated : 12 Apr, 2023

In this article, we will see how to set the color of an element’s border with JavaScript. To set the color of an element’s border with JavaScript, we can use the element’s style property.

Method 1: First, we will create a text element and then apply some CSS styles including the border color of the element. After that, we use JavaScript borderColor property to set the color of the border element.

Syntax:

document.querySelector(".box-element").style.borderColor = "green";

Example: In this example, we will set the border color from black to green.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to set the color of an element  
        border with JavaScript? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
        
          h1 { 
            color: green; 
        } 
        
        .box-element { 
            width: 350px; 
            border: 5px solid; 
            font-size: 18px; 
            padding: 20px; 
            margin: auto; 
        } 
  
        input { 
            margin-top: 20px; 
            font-size: 18px; 
            font-weight: bold; 
            padding: 5px 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to set the color of an elements  
        border with JavaScript? 
    </h3> 
  
    <div class="box-element"> 
        Welcome to GeeksforGeeks 
    </div> 
  
    <input type="button" 
        value="Change Border Color" 
        onclick="myFun()"> 
  
    <script> 
        function myFun() { 
            document.querySelector(".box-element") 
                .style.borderColor = "green"; 
        } 
    </script> 
</body> 
  
</html>

Output:

Method 2: First, we will create a text element and then apply some CSS styles to the element. After that, we use JavaScript style property to add the new border with some color of the border element.

Syntax:

let styles = `border: 5px solid green;`;
document.querySelector(".box-element").style = styles;

Example: In this example, we will add the border to the element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to set the color of an elements  
        border with JavaScript? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .box-element { 
            width: 350px; 
            font-size: 18px; 
            padding: 20px; 
            margin: auto; 
        } 
  
        input { 
            margin-top: 20px; 
            font-size: 18px; 
            font-weight: bold; 
            padding: 5px 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to set the color of an elements  
        border with JavaScript? 
    </h3> 
  
    <div class="box-element"> 
        Welcome to GeeksforGeeks 
    </div> 
  
    <input type="button" 
        value="Change Border Color" 
        onclick="myFun()"> 
  
    <script> 
        let styles = `border: 5px solid green;`; 
  
        function myFun() { 
            document.querySelector(".box-element") 
                .style = styles; 
        } 
    </script> 
</body> 
  
</html>