Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the shape of the border of the top-left corner with JavaScript?
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.
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";
Parameters
length ? Set the circular border of the top left border using px, em, or cm.
% ? To set the circular border of the top left border in percentage
initial ? Default value.
inherit ? Set the circular border of the top left border using the parent element.
Example 1: Toggle Border Radius
In this example, we add a button and apply an on-click event to it. After clicking the button, it will execute a function that toggles the borderTopLeftRadius property between 0px and 50px.
<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>
Example 2: Dynamic Border Radius with User Input
In this example, we take the value of the radius from the user input and use different units (px, em, cm, %) for the borderTopLeftRadius property. The user can select the unit using radio buttons.
<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 borderValue = document.getElementById("input").value;
element.style.border = "5px solid blue";
var radio_selected = document.querySelector('input[name="radio_btn"]:checked');
var radius = borderValue + radio_selected.value;
element.style.borderTopLeftRadius = radius;
}
</script>
</body>
</html>
Key Points
The
borderTopLeftRadiusproperty accepts length values (px, em, cm) and percentagesYou can specify one value for circular radius or two values for horizontal and vertical radii
The property works in conjunction with the
borderpropertyChanges made through JavaScript DOM are applied immediately
Conclusion
The borderTopLeftRadius property in JavaScript DOM allows you to create rounded top-left corners dynamically. Use it with appropriate length values or percentages to achieve the desired visual effect.
406 Views
