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 width of the right border with JavaScript?
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.
So, let us look at how to set the right border width with JavaScript.
Following are the properties by which we can set the width of the right border:
- Using the borderRightWidth property
- Using the borderWidth property
Using the borderRightWidth property
The borderRightWidth style property sets the width of an element's right border. The border width can be set using %, em, cm, and px.
Syntax
var element = document.getElementById("elementId");
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;
padding: 20px;
}
</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 this example, we have used two buttons "+" and "-". After clicking on the "+" button, the right border width on a div will increase by one. After clicking on the "-" 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() {
if (i > 1) i--;
document.getElementById("div").style.borderRightWidth = i + "px";
document.getElementById("div").innerHTML = "Clicked on minus button (Current width: " + i + "px)";
}
</script>
</body>
</html>
Using the borderWidth property
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
The borderWidth property accepts 1-4 values:
- If borderWidth = "5px" - All sides get 5px width
- If borderWidth = "2px 10px" - Top/bottom get 2px, left/right get 10px
- If borderWidth = "1px 5px 3px" - Top gets 1px, left/right get 5px, bottom gets 3px
- If borderWidth = "1px 5px 3px 2px" - Top: 1px, Right: 5px, Bottom: 3px, Left: 2px
Syntax
var element = document.getElementById("elementId");
element.style.borderWidth = "topWidth rightWidth bottomWidth leftWidth";
Example
The following example accepts a value for the right border width. After clicking the button, the right border width will be set to the user's input value, while other sides remain at 2px 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, 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 pixels, whereas the other sides maintain a border width of 2px.
Comparison
| Property | Usage | Best For |
|---|---|---|
borderRightWidth |
Sets only right border width | Changing single border side |
borderWidth |
Sets all four border widths at once | Setting multiple borders simultaneously |
Conclusion
Use borderRightWidth property for specifically targeting the right border width. For multiple border sides, the borderWidth shorthand property provides more control with its flexible value system.
339 Views
