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

Javascript Web Development Front End Technology

This tutorial will teach us to set the width of the right border with JavaScript. To set the width of the right border, use the borderRightWidth property. Set the width of the right border using this property. We can also apply the borderWidth to set the right border.

Borders are used on various elements on a webpage. They display the boundaries of an element. We can apply the borders to all sides of an element. There are different properties to set different sides of a border. For a static border, generally, CSS is used. But to change it dynamically, JavaScript DOM provides us with properties.

But to change it dynamically, JavaScript DOM provides us with properties.

So, Let us look at how to set the right border width with JavaScript.

Following is the property by which we can set the width of the right border −

Using the borderRightWidth property
Using the borderWidth property

Using the borderRightWidth property of DOM

The borderRightWidth style property sets the width of an element's right border. The border width can be set using %, em, cm, and px.

Following is the syntax to set the right border width using the borderRightWidth property with JavaScript DOM −

Syntax

var element = document.getElementById(" <Id here> "); 
element.style.borderRightWidth = " thin || thick || medium || initial || inherit || length ";

Parameters

thin − Set a thin border
medium − Set a medium border
thick − Set a thick border
length − Set the border on a value specified in %, cm, px, or em.
initial − Set to a default value.
inherit − Inherit the width from its parent.

Example 1

You can try to run the following code to learn how to set the width of the right border with JavaScript.


<!DOCTYPE html> 
<html> 
<head> 
   <style> 
      #box { 
         border: 2px solid blue; 
         width: 550px; 
         height: 300px; 
      } 
   </style> 
</head> 
<body> 
   <div id = "box">Demo Text</div> 
   <br><br> 
   <button type="button" onclick="display()">Change right border width</button> 
   <script> 
      function display() { 
         document.getElementById("box").style.borderRightWidth = "thick" ; 
      } 
   </script> 
</body> 
</html>

Example 2

In the example, we have used two buttons which are "-" and "+." After clicking on a "+" button, the right border width on a div will increase by one. After clicking on a "-" button, the right border width on the div will decrease by one.


<html> 
<head> 
   <style> 
      body{ 
         margin: 1%; 
      } 
      #div{ 
         padding: 2%; 
         border: 1px solid red; 
         width: 500px; 
         text-align: center; 
         margin: 5px; 
      } 
      .btn{ 
         font-size: larger; 
         width: 30px; 
         background-color: black; 
         color: white; 
      } 
   </style> 
</head>  
<body>  
   <h3>Use <i>borderRightWidth</i> property to set the right border width</h3>  
   <div id = "div">This is a div</div><br>  
   Increase right border width:  
   <button id = "plus" class = "btn"> + </button> <br><br> 
   Decrease right border width: 
   <button id = "minus" class = "btn"> - </button>   
   <script> 
      var i = 1; 
      document.getElementById("plus").addEventListener("click", increaseRightBorder); 
      document.getElementById("minus").addEventListener("click", decreaseRightBorder); 
      function increaseRightBorder(){ 
         document.getElementById("div").style.borderRightWidth = i + "px"; 
         document.getElementById("div").innerHTML = "Clicked on plus button: "+i+" times"; 
         i++; 
      }  
      function decreaseRightBorder(){ 
         document.getElementById("div").style.borderRightWidth = i + "px"; 
         document.getElementById("div").innerHTML = "Clicked on minus button(Remaining plus): "+i+" times"; 
         i--; 
      }  
   </script>  
</body> 
</html>

In the above example, users can see that we are changing the width of the right border by clicking the buttons. We have used the borderRightWidth property to set the right border width.

Using the borderWidth property of DOM

The borderWidth property of JavaScript DOM is used to set the width of the element's border.

The borderWidth property is also used as a shorthand to set the following properties.

borderTopWidth: Set the width of the top border of an element
borderRightWidth: Set the width of the right border of an element
borderBottomWidth: Set the width of the bottom border of an element
borderLeftWidth: Set the width of the left border of an element

If borderWidth ="1"

"1" will be the width of the border applied from all sides.

If borderWidth ="1 2";

"1" will be the top and bottom border widths, and "2" will be the right and left widths.

If borderWidth ="1 2 3";

"1" will be the top border width, "2" will be the right and left border width, and "3" will be the bottom border width.

If borderWidth ="1 2 3 4";

"1" will be the top border width, "2" will be the right border width, "3" will be the bottom border width, and "4" will be the left border width.

We can use the borderWidth property to set the border width with JavaScript. Users can follow the syntax below to set the right border width with JavaScript.

Syntax

var element = document.getElementById(" <Id here> "); 
var right_width = "<one space here><Right border width><one space here>"; 

//Example: right_width = " 10px "; 
element.style.borderWidth = "<Top width here>" + right_width + "<bottom width here><left width here>"; 

//set the right border and the other side's width

You can follow the above syntax to set the width of the border with JavaScript.

Example

The following example accepts a value of the right border width that wants to be set to an element. After clicking a button, the right border width will be set to the value given by the user, and other values will be set to 5px by default.


<html> 
<head>  
   <style>  
      #div{ 
         border: 2px solid greenyellow; 
         width: 550px; 
         padding: 10px; 
      } 
   </style> 
</head> 
<body>  
   <div id = "div">  
      <h3>Use <i>borderWidth</i> property to set the right border width</h3> 
      <span>The width of Top, Bottom and left border applied to 2px by default.</span> <br><br> 
      <label for = "right"> Right Border Width : </label>  
      <input id = "right" type = "number" value = "0" name = "right_border"/> <br> 
      <br /> 
      <button id = "submit"> Apply </button> 
   </div>
   <script>  
      document.getElementById("submit").addEventListener("click", setRightBorder);  
      function setRightBorder(){  
         var width = document.getElementById("right").value; 
         var right_width = " " + width + "px "; 
         document.getElementById("div").style.borderWidth =  
         "2px" + right_width + "2px 2px"; 
      }  
   </script> 
</body> 
</html>

In the above example, users can see that we have used the borderWidth property to set the right border width with JavaScript. The right border's width is set to the user inputted value in px, whereas the other sides have a border with 5px width.

In this tutorial, we have learned to set the right border width with JavaScript.