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 top properties in one declaration with JavaScript?
To set all the border top properties in a single declaration, use the borderTop property. With this property, you can set the border-top-width, border-top-style, and border-top-color property in one statement.
Syntax
element.style.borderTop = "width style color";
Parameters
The borderTop property accepts a string value containing three components:
- width: Border thickness (e.g., "thin", "thick", "5px")
- style: Border style (e.g., "solid", "dashed", "dotted")
- color: Border color (e.g., "red", "#000000", "rgb(255,0,0)")
Example
You can try to run the following code to learn how to work with border-top properties in JavaScript:
<!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><br>
<button type="button" onclick="display()">Change top border</button>
<script>
function display() {
document.getElementById("box").style.borderTop = "thick solid #000000";
}
</script>
</body>
</html>
Multiple Border Styles Example
Here's an example showing different border top configurations:
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 2px solid gray;
}
</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>
<script>
// Different border top styles
document.getElementById("box1").style.borderTop = "5px solid red";
document.getElementById("box2").style.borderTop = "3px dashed blue";
document.getElementById("box3").style.borderTop = "thick dotted green";
</script>
</body>
</html>
Common Use Cases
The borderTop property is commonly used for:
- Creating visual separators between sections
- Highlighting active navigation items
- Adding accent lines to headers or cards
- Dynamically changing borders based on user interactions
Conclusion
The borderTop property provides a convenient way to set width, style, and color for the top border in a single declaration. This approach is more efficient than setting each border property individually.
Updated on: 2026-03-15T23:18:59+05:30
309 Views
Advertisements