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

In this tutorial, we will learn how to set the color of an element's border with JavaScript.

The border is the outline of an HTML element. The border can be styled differently with different types of border properties. To set the color of the border of an element with JavaScript, we have the style borderColor property.

Using the Style borderColor Property

In JavaScript, the style borderColor property of an element is used to set the color of the border of an element. To set the color of the border of an element, we first need to get the element object using the document.getElementById() method and then set the style.borderColor property.

The border color can be set in different ways like −

  • If we give only a single color value or name in the parameter, then it will add that same color on all four sides.

  • If we give two color values, the first will take care of the top and bottom border colors, and the second will take care of the left and right border colors.

  • If we give three color values, then the first color value will be taken as the top border color, the second as the left and right border color, and the third as the bottom border color.

  • If we give four values sequentially, it will take the top, right, bottom, and left border colors, respectively.

Syntax

const object = document.getElementById('element_id')

object.style.borderColor = 'color | transparent | inherit | initial'

We are accessing the element using the document.getElementById() method, and then we set the border color using the style.borderColor property.

Parameters

  • color − The border color of the element.

  • transparent − The border color should be transparent.

  • inherit − The border color inherits its parent element’s property.

  • initial − The border color sets to default.

Example 1

In the below example, we set the color of an element's border in JavaScript, using the borderColor property. You can try to run the following code to learn how to set a color of an element's border −

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         height: 300px;
         width: 500px;
         border: thick dashed yellow;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
      <p>DEMO TEXT</p>
   </div>
   <br>
   <p> Click the below button to set the color of border to green.</p>
   <button type="button" onclick="display()">Set new color of border</button>
   <script>
      function display() {
         document.getElementById("box").style.borderColor = "green";
      }
   </script>
</body>
</html>

Example 2

In the below example, we have used the style.borderColor property to set the color of an element border with JavaScript. We have used a button “Set Border Color” click event to execute the “setBorder()” function that sets the border color of multiple elements.

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: lightcyan;
      }
   </style>
</head>
<body>
   <h3> Set the color of an elements border using <i> style.borderColor </i>property in JavaScript </h3>
   <button onclick="setBorder()">Set Border Color</button>
   <div id="element1">Single border color</div>
   <div id="element2">Two border colors</div>
   <div id="element3">Three border colors</div>
   <div id="element4">Four border colors</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      const element4 = document.getElementById('element4')
      function setBorder() {
         element1.style.borderColor = 'blueviolet'
         element2.style.borderColor = 'crimson yellowgreen'
         element3.style.borderColor = 'orange tomato cadetblue'
         element4.style.borderColor = 'red blue green yellow'
      }
   </script>
</body>
</html>

Example 3

In the below example, we have used the style borderColor property to set the color of an element border with JavaScript. We have used a color picker to take the user input of the border color and set that color of the element’s border color using a button click event.

<html>
<body>
   <h2> Set the color of an elements border using <i> style borderColor </i> property in JavaScript </h2>
   <input type="color" name="border-color" id="border-color">
   <button onclick="setBorder()">Set Border Color</button>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightcyan; ">Hello World!</div>
   <script>
      function setBorder() {
         const root = document.getElementById('root')
         
         // border-color input field
         const border_color = document.getElementById('border-color')
         
         // set the border-color input fields value to element's border color
         root.style.borderColor = border_color.value
      }
   </script>
</body>
</html>

In this tutorial, we learned how to set the color of an element's border with JavaScript. We have seen how to set different colors on different sides of the element border. In the first example, we see how to set the color on multiple sides of an element’s border, and in the second example, we see how to set the border color from a user input field.

Updated on: 09-Nov-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements