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

Javascript Web Development Front End Technology

In this tutorial, we will learn to set a style of the right border with JavaScript. To set the style of the right border in JavaScript, use the borderRightStyle property. Set the style of the right border using this property.

We can apply borders to an element from any side or all sides. We can customize that border on any side. Every edge of a border has a specific property that can use only for that edge. We can provide three parameters like style, color, and width for creating a border. CSS is used to do such tasks. But, we can do this by using JavaScript DOM.

There are many types of borders. Some of them look like straight lines, and some like wavy lines. We can easily change the style of any edge of the Border in run-time using JavaScript.

So, let us look at how to set a style of the right border with JavaScript using the borderRightStyle property.

Using the borderRightStyle Property

There are a lot of styles we can use for our borders. It attracts the user's attention and enhances the look of a web page. We can set the different styles for different edges of the Border. We will set the style of the right edge of the Border. The borderRightStyle is the property that sets the style of the right border.

Syntax

Following is the syntax to set a style of the right border using the borderRightStyle property −

elem.style.borderRightStyle = value

Here we set the style of the right border of elem. We set the borderRightStyle to value.

The property values are as follows −

none − Sets no border (by default) or delete border.
hidden − The border is there but hidden.
dotted − A dotted line as a border.
dashed − A dashed line as a border.
solid −The Normal solid line
double − A double line as a border
groove −A 3D Grooved Border.
ridge − A 3D Ridged Border
inset − A 3D inset border
outset − A 3D outset border
initial − Default value.
inherit − Inherit from a parent

Example 1

In the example, we have created the div with a solid border. After clicking a button, we execute a function and set the style of the Border. We used the borderRightStyle property to set a style of the right Border. After double-clicking a button, our border will return to normal.


<html>
<head>
   <style>
      #container{
         width: 70%;
         height: 15%;
         border: 5px solid red;
      }
   </style>
</head>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <div id = "container">
      Apply borders here
   </div>
   <br />
   <button id = "btn"> Apply </button>
   <script>
      var btn = document.getElementById("btn");
      var div = document.getElementById("container");
      btn.addEventListener("click", execute);
      function execute(){
         if(div.style.borderRightStyle != "dotted"){
            div.style.borderRightStyle = "dotted";
         }
         else{
            div.style.borderRightStyle = "solid";
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the borderRightStyle property to set the right border style.

Example 2

In the example below, we are taking input from the user in numbers. We are creating several squares and appending them to a div on the Button-click. We applied a border on each of the squares with a solid style. We have used the borderRightStyle property to set a style of the right Border and applied the dotted style to it.


<html>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <label for = "input_num"> No. of Elements: </label>
   <input type = "number" id = "input_num" value = "0" name = "value"/>
   <br /><br />
   <button id = "btn"> Create Element </button>
   <div id = "div"></div>
   <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", execute);
      function execute(){
         var element_div = document.getElementById("div")
         var input_val = document.getElementById("input_num").value;
         for(i=0 ; i<input_val ; i++){
            var element = document.createElement("p");
            element.style.width = "50px";
            element.style.height = "50px";
            element.style.border = "2px solid red";
            element.style.borderRightStyle = "dotted";
            element.style.margin = "30px";
            element.style.borderRadius = "5px";
            element_div.style.display = "flex";
            element_div.style.flexDirection = "row";
            element_div.appendChild(element);
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have created several squares equal to the input given by the user. We have used the borderRightStyle property to set a style of the right border for each square. We have set the right side of a square in the dotted style.

In this tutorial, we have learned to set a style of the right border using the JavaScript DOM.