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


In this tutorial, we will learn how to set the color of the right border with JavaScript. To set the color of the right border in JavaScript, use the borderRightColor property. Set the color of the right border using this property. We can also apply the borderColor property to complete the task.

The border is the outline of an HTML element. Border color can be set for different sides using different properties. To set the color of the right border with JavaScript, we have different ways −

  • Using the style.borderRightColor Property

  • Using the style.borderColor Property

Using the style.borderRightColor Property

In JavaScript, the style.borderRightColor property of an element is used to set the color of an element's right border. To set the style.borderRightColor property, we need to access the element’s object using the document.getElementById() method and after accessing the element object we set the style.borderRightColor property to color the right border of the element.

Syntax

const object = document.getElementById('element_id')

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

Using the document.getElementById() method we are accessing the element object and set the style.borderRightColor property.

Parameters

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

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

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

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

Example

In the below example, we have used the style.borderRightColor property to set the color of the right border with JavaScript. We have used a button click event to execute the “setRightBorder()” function that will set the color of the right border of multiple elements.

<html> <head> <style> div { border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: rgb(233, 196, 255); } </style> </head> <body> <h2> Set the color of the right border using <i> style.borderRightColor </i> property with JavaScript </h2> <button onclick="setRightBorder()">Set Right Border Color</button> <div id="element1">Welcome to Tutorialspoint!</div> <div id="element2">Hello World!</div> <div id="element3">JavaScript is Best!</div> <script> const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') const element3 = document.getElementById('element3') function setRightBorder() { element1.style.borderRightColor = 'red' element2.style.borderRightColor = 'green' element3.style.borderRightColor = '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 the style.borderColor property. We need to set all sides' border colors as transparent to get only the right border color of an element.

Syntax

const object = document.getElementById('element_id')

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

Using the document.getElementById() method we are accessing the element object and set the 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 right border with JavaScript. We have used an input field to take the user input of the border color as a color name, hex color code, or the rgb color code and set that color of the element’s border color using a button click event.

<html> <body> <h2> Set the color of the right border using <i> style.borderColor </i> property with JavaScript </h2> <input type="text" name="border-color" id="border-color" value=# FF0000> <button onclick="setRightBorder()">Set Right Border Color</button> <div id="root" style="border: 5px solid transparent; padding: 10px; margin: 10px 0; background-color: rgb(233, 196, 255); "> Welcome to Tutorialspoint! </div> <script> function setRightBorder() { const root = document.getElementById('root') // border-color input field value const border_color = document.getElementById('border-color').value // set the border-color input fields value to element's right border color root.style.borderColor = 'transparent ' + border_color + ' transparent transparent' } </script> </body> </html>

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

Updated on: 09-Nov-2022

214 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements