How to set the color of the left border with JavaScript?

In this tutorial, we will learn how to set the color of the left border with JavaScript. To set the color of the left border in JavaScript, use the borderLeftColor property. Set the color on this property that you want for the border. We could also apply the borderColor property to set the color of the left border.

A border is an HTML element's outline. Different sides can be set with different border colors. To set the color of the left border with JavaScript, we have different ways −

  • Using the style.borderLeftColor property

  • Using the style.borderColor property

Using the Style borderLeftColor Property

The style borderLeftColor property of an element sets the color of the left border of an element. Firstly, we need to get the element object of the element using the document.getElementById() method. Secondly, we need to use the style borderLeftColor property to set the color of the left border.

Syntax

const object = document.getElementById('id')

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

The document.getElementById() method is used to access the element, and then we set the color of the left border using the style borderLeftColor property.

Parameters

  • color − The color of the left border of the element.

  • transparent − The color of the left border should be transparent.

  • inherit − The color of the left border inherits from its parent element’s property.

  • initial − The color of the left border sets to default.

Example

In the below example, we have used the style.borderLeftColor property to set the color of the left border with JavaScript. We have used three buttons click events to execute the three separate functions that set the left border color of a specific element.

<html>
<head>
   <style>
      div {
         border: 5px solid transparent;
         padding: 10px;
         margin: 10px 0;
         background-color: bisque;
      }
   </style>
</head>
<body>
   <h2> Setting the left border color with JavaScript using <i> style.borderLeftColor </i> property </h2>
   <h4>Set Left Border Color of Elements:</h4>
   <button onclick="setLeftBorder1()">Element 1</button>
   <button onclick="setLeftBorder2()">Element 2</button>
   <button onclick="setLeftBorder3()">Element 3</button>
   <div id="element1">Element 1</div>
   <div id="element2">Element 2</div>
   <div id="element3">Element 3</div>
   <script>
      const element1 = document.getElementById('element1')
      const element2 = document.getElementById('element2')
      const element3 = document.getElementById('element3')
      function setLeftBorder1() {
         element1.style.borderLeftColor = 'red'
      }
      function setLeftBorder2() {
         element2.style.borderLeftColor = 'green'
      }
      function setLeftBorder3() {
         element3.style.borderLeftColor = 'blue'
      }
   </script>
</body>
</html>

Using the style.borderColor Property

The style.borderColor property of an element is used to specify the border's color of the element in JavaScript. It is necessary first to obtain the element object using the document.getElementById() method before setting th7e style.borderColor property. To only set the color of the left border, we need to provide all other sides' colors to be transparent and provide the left border a specific color.

Syntax

const object = document.getElementById('element_id')

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

In the above syntax, ‘element_id’ is the id of an HTML element. We are accessing the element using the document.getElementById() method, and then we are setting 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

In the below example, we have used the style.borderColor property to set the color of the left border with JavaScript. We have used radio buttons 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 the left border using <i> style.borderColor </i> property with JavaScript </h2>
   <div>
      <label for="red">
         <input type="radio" name="color" id="color-red" value="red">
         Red
      </label>
      <label for="green">
         <input type="radio" name="color" id="color-red" value="green">
         Green
      </label>
      <label for="blue">
         <input type="radio" name="color" id="color-red" value="blue">
         Blue
      </label>
      <button onclick="setLeftBorder()">Set Left Border Color</button>
   </div>
   <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: lightyellow;">Welcome to Tutorialspoint!</div>
   <script>
      function setLeftBorder() {
         const root = document.getElementById('root')
         const color = document.querySelector('input[name="color"]:checked').value
         root.style.borderColor = 'transparent transparent transparent ' + color
      }
   </script>
</body>
</html>

In this tutorial, we learned how to set the color of the left border with JavaScript. We have seen two ways to color the left border using the style.borderLeftColor and the style.borderColor properties. Users can follow any of these methods to color the left border.

Updated on: 09-Nov-2022

341 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements