How to set the shape of the border of the top-left corner with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to set the radius of the top-left corner of the border using JavaScript DOM. To set the shape of the border of the top-left corner in JavaScript, use the borderTopLeftRadius property. Set the border radius using this property.

We apply borders on a webpage many times. Generally, it is used to display the importance of an element or a difference between the sections. We can create a table in a webpage by using HTML. It is a simple table that does not attract the user. So, we use CSS to design the table or the entire webpage. JavaScript DOM also provides us the ability to apply designs in run-time.

Plenty of options are available to make our table attractive using JavaScript DOM. Creating a rounded border is one of the options we can use. There are different properties to make the different corners of the border round. We have to set the length of the radius to make it rounded.

Let us look at how to set the radius of the top-left corner of the border. Following is the property by which we can set the radius of the top-left corner of the border using JavaScript DOM −

The borderTopLeftRadius property

Using the borderTopLeftRadius Property

By using JavaScript DOM, we can make a border rounded. We can even add a different property and different radius for every corner. The borderTopLeftRadius is the property by which we can set the radius of the top-left corner of the border.

There are two values we can specify for the borderTopLeftRadius property.

If we set borderTopLeftRadius="10px", then the horizontal radius will set to 10px.

If we set borderTopLeftRadius="10px 20px", then the horizontal radius will set to 10px and a vertical radius will set to 20px.

Syntax

Following is the syntax to set the shape of the border of the top left corner using the borderTopLeftRadius property in JavaScript −

var div=document.getElementById(" <your ID here> ");
div.style.border=" < width || type || color >";
div.style.borderTopLeftRadius=" < length || % || Initial || Inherit > ";

You can follow the above syntax to use the borderTopLeftRadius property.

Parameters

% − To set the circular border of the top left border in percentage
length − Set the circular border of the top left Border using px or cm.
Initial − Default value.
Inherit − Set the circular border of the top left Border using the parent element.

Example 1

In the example given below, we added a button and applied an on-click event to it. After clicking a button, it will execute a function. The function contains a borderTopLeftRadius property that will change the shape of the top-left corner of the border to rounded. After double-clicking the button, the button will return to its original shape.


<html>
<body>
   <h2> Use <i> borderTopLeftRadius </i> to set the radius of the top-left corner </h2>
   <button id = "btn">
      change border shape
   </button>
   <script>
      var element = document.getElementById("btn");
      element.style.padding = "20px";
      element.style.border = "4px solid blue";
      element.addEventListener("click", changeShape);
      function changeShape(){
         if(element.style.borderTopLeftRadius <= "0px"){
            element.style.borderTopLeftRadius = "50px";
         }
         else{
            element.style.borderTopLeftRadius = "0px";
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the borderTopLeftRadius property to set the radius of the border’s top-left using JavaScript DOM.

Example 2

In the example, we are taking the value of the radius to use it in the borderTopLeftRadius property. Every length has its unit, as we used px in the above example. There are also other units like %, em, cm, etc. We can also use them as our length. Using the Radio-buttons, we are taking the input for the unit from the user. After clicking a button, the borderTopLeftRadius property will change the shape of the top-left corner of the border to rounded.


<html>
<body>
   <h2> Use <i> borderTopLeftRadius </i> to set the radius of the top-left corner </h2>
   <div id = "container">
      Will be surrounded by border on button click
   </div>
   <label for="input"> Radius(only integer) : </label>
   <input type="text" name="value" id="input"/><br>
   <input type="radio" name="radio_btn" id="pixel" value="px"/>
   <label for="pixel"> px </label><br>
   <input type="radio" name="radio_btn" id="emph" value="em"/>
   <label for="emph"> em </label><br>
   <input type="radio" name="radio_btn" id="centime" value="cm"/>
   <label for="centime"> cm </label><br>
   <input type="radio" name="radio_btn" id="percent" value="%"/>
   <label for="percent"> % </label><br>
   <button id = "btn"> Create rounded Border </button>
   <script>
      var element = document.getElementById("container");
      var button = document.getElementById("btn");
      element.style.width = "40%";
      element.style.padding = "20px";
      element.style.margin = "20px";
      button.addEventListener("click", border);
      function border(){
         var border = document.getElementById("input").value;
         element.style.border = "5px solid blue";
         var radio_selected = document.querySelector( 'input[name="radio_btn"]:checked');
         var radius = border+radio_selected.value;
         element.style.borderTopLeftRadius = radius;
      }
   </script>
</body>
</html>