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
Selected Reading
How to set all the border left properties in one declaration with JavaScript?
The borderLeft property in JavaScript allows you to set all the left border properties (width, style, and color) in a single declaration. This is more convenient than setting borderLeftWidth, borderLeftStyle, and borderLeftColor individually.
Syntax
element.style.borderLeft = "width style color";
Parameters
- width: Border thickness (e.g., "thin", "medium", "thick", or pixel values like "5px")
- style: Border style (e.g., "solid", "dashed", "dotted", "double")
- color: Border color (e.g., color names, hex codes, rgb values)
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br>
<button type="button" onclick="changeBorder()">Change Left Border</button>
<button type="button" onclick="resetBorder()">Reset Border</button>
<script>
function changeBorder() {
document.getElementById("box").style.borderLeft = "thick solid #000000";
}
function resetBorder() {
document.getElementById("box").style.borderLeft = "thick solid gray";
}
</script>
</body>
</html>
Multiple Border Left Styles
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 200px;
height: 100px;
padding: 15px;
margin: 10px;
border: 2px solid lightgray;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">Box 1</div>
<div class="demo-box" id="box2">Box 2</div>
<div class="demo-box" id="box3">Box 3</div>
<button onclick="applyBorders()">Apply Different Left Borders</button>
<script>
function applyBorders() {
// Thick solid red
document.getElementById("box1").style.borderLeft = "5px solid red";
// Medium dashed blue
document.getElementById("box2").style.borderLeft = "3px dashed blue";
// Thin dotted green
document.getElementById("box3").style.borderLeft = "2px dotted green";
}
</script>
</body>
</html>
Common Border Left Styles
| Style | Example Value | Description |
|---|---|---|
| Solid | "3px solid black" | Continuous solid line |
| Dashed | "2px dashed blue" | Dashed line pattern |
| Dotted | "4px dotted red" | Dotted line pattern |
| Double | "6px double green" | Two parallel solid lines |
Key Points
- The
borderLeftproperty combines width, style, and color in one declaration - Values can be specified in any order, but the standard order is width-style-color
- You can omit values; default width is "medium", default style is "none", default color is current text color
- Changes take effect immediately when applied via JavaScript
Conclusion
The borderLeft property provides a convenient way to set all left border properties at once. Use it to dynamically modify left borders with a single line of code instead of setting multiple border properties separately.
Updated on: 2026-03-15T23:18:59+05:30
147 Views
Advertisements