Post
Ask Question

A Simple Example of Border Radius Property in JavaScript

Introduction

 
In this blog, we will discuss the radius property of the border in Javascript. Here we set the border-radius of a div control according to the value of the four TextBox in our program.
 
For this follow these steps:
 
Step1: First we create three tables like this.
  1. <body>  
  2.      <table>  
  3.           <tr>  
  4.                <td> <input id="txt1" type="text" style="width: 20px; height: 20px;" /> </td>  
  5.                <td style="width: 300px;"> </td>  
  6.                <td> <input id="txt2" type="text" style="width: 20px; height: 20px;" /> </td>  
  7.           </tr>  
  8.      </table>  
  9.      <table>  
  10.           <tr>  
  11.                <td> </td>  
  12.                <td>  
  13.                     <div id="div1" align="center"> My Name is Mahak Gupta</div>  
  14.                </td>  
  15.                <td> </td>  
  16.           </tr>  
  17.      </table>  
  18.      <table>  
  19.           <tr>  
  20.                <td> <input id="txt3" type="text" style="width: 20px; height: 20px;" /> </td>  
  21.                <td style="width: 300px;"> </td>  
  22.                <td> <input type="text" id="txt4" style="width: 20px; height: 20px;" /> </td>  
  23.           </tr>  
  24.      </table>  
  25. </body> 
image1.jpg
 
Here we take four TextBoxes and a <div> control in our program.
 
Step 2: Now we write the code by this code, when we put the value on the Top Left TextBox the Top Left radius of the div will be changed. For this first we write the event on the TextBox (txt1) like this:
  1. <input id="txt1" onchange="Show1()"  type="text" style="width:20px;height:20px;" />
Now we will write the function:
  1. <script language="javascript">  
  2. function Show1() {  
  3.      var a = document.getElementById('txt1').value;  
  4.      document.getElementById('div1').style.borderTopLeftRadius = a + "px";  
  5. } 
Here we take the txt1 value and set it as the the radius of the div.
 
The Output will be:
 
image2.jpg
 
Step3: Now we write the code for txt2 (TextBox), by this the Top Right Radius of the div will be changed:
  1. <input id="txt2" onchange="Show2()" type="text" style="width:20px;height:20px;"  /> 
Now we will write the function:
  1. function Show2() {  
  2.     var a = document.getElementById('txt2').value;  
  3.     document.getElementById('div1').style.borderTopRightRadius = a + "px";  
  4. } 
The Output Will be:
 
image3.jpg
 
Step4: Now we write the code for txt3(TextBox), by this the Bottom Left Radius of the div will be changed:
  1. <input id="txt3" onchange="Show3()" type="text" style="width:20px;height:20px;"/> 
Now we will write the function:
  1. function Show3()  
  2. {  
  3.     var a = document.getElementById('txt3').value;  
  4.     document.getElementById('div1').style.borderBottomLeftRadius = a + "px";  
  5. } 
The Output will be:
 
image4.jpg
 
Step5: Now we write the code for txt4(TextBox), by this the Bottom Right Radius of the div will be changed:
  1. <input id="txt4" onchange="Show4()" type="text" style="width:20px;height:20px;"  /> 
Now we will write the function:
  1. function Show4()  
  2.   
  3.     var a = document.getElementById('txt4').value;  
  4.     document.getElementById('div1').style.borderBottomRightRadius = a + "px";  
  5. } 
The Output will be:
 
image5.jpg
 
Now we will set the value in all the TextBox, after that the output will be:
 
image6.jpg