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
Set all the top border properties in one declaration using CSS
The CSS border-top property is used to set all the top border properties in one declaration. This shorthand property combines border-top-width, border-top-style, and border-top-color into a single property.
Syntax
selector {
border-top: width style color;
}
Possible Values
| Value | Description |
|---|---|
width |
Sets the width of the top border (thin, medium, thick, or length units) |
style |
Sets the style of the top border (solid, dashed, dotted, etc.) |
color |
Sets the color of the top border (color name, hex, rgb, etc.) |
Example: Basic Border Top Declaration
The following example demonstrates how to set all top border properties in one declaration −
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 20px;
border-top: thick dashed #FFFF00;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p>This paragraph has a thick yellow dashed top border.</p>
</body>
</html>
A paragraph with a thick yellow dashed line at the top edge appears with light gray background and padding.
Example: Multiple Border Top Styles
The following example shows different border-top combinations −
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
border-top: 2px solid red;
padding: 15px;
margin: 10px;
}
.box2 {
border-top: 5px dotted blue;
padding: 15px;
margin: 10px;
}
.box3 {
border-top: medium double green;
padding: 15px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1">2px solid red top border</div>
<div class="box2">5px dotted blue top border</div>
<div class="box3">Medium double green top border</div>
</body>
</html>
Three boxes appear with different top border styles: first with a thin solid red line, second with a dotted blue line, and third with a thick double green line.
Conclusion
The border-top property provides an efficient way to set width, style, and color of the top border in a single declaration. This shorthand property simplifies CSS code and improves maintainability.
Updated on: 2026-03-15T12:27:08+05:30
317 Views
Advertisements