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 bottom properties in one declaration in JavaScript DOM?
To set all border bottom properties in one declaration using JavaScript DOM, use the borderBottom property. This property allows you to simultaneously set the border-bottom-width, border-bottom-style, and border-bottom-color in a single statement.
Syntax
element.style.borderBottom = "width style color";
Parameters
The borderBottom property accepts a string value containing three space-separated components:
- width: Border thickness (e.g., "thin", "medium", "thick", "2px", "5px")
- style: Border style (e.g., "solid", "dashed", "dotted", "double")
- color: Border color (e.g., "red", "#ff0000", "rgb(255,0,0)")
Example
Here's how to set border bottom properties using JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 120px;
height: 120px;
margin: 20px;
padding: 10px;
}
</style>
</head>
<body>
<button onclick="setBorderBottom()">Set Border Bottom</button>
<p>Demo Text</p>
<p>Demo Text</p>
<script>
function setBorderBottom() {
document.getElementById("box").style.borderBottom = "5px solid red";
}
</script>
</body>
</html>
Multiple Examples
You can set different border bottom styles:
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 150px;
height: 60px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
}
</style>
</head>
<body>
Thick Double Green
Medium Dotted Blue
Thin Solid Orange
<script>
// Set different border bottom styles
document.getElementById("box1").style.borderBottom = "thick double green";
document.getElementById("box2").style.borderBottom = "medium dotted blue";
document.getElementById("box3").style.borderBottom = "thin solid orange";
</script>
</body>
</html>
Key Points
- All three values (width, style, color) can be set in one declaration
- The order of values matters: width, style, then color
- You can omit any value to use the default
- Individual properties can still be set separately if needed
Conclusion
The borderBottom property provides an efficient way to set all bottom border properties at once. Use the format "width style color" to define comprehensive border bottom styling in JavaScript DOM manipulation.
Updated on: 2026-03-15T23:18:59+05:30
202 Views
Advertisements