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
Change the color of top border with CSS
The border-top-color CSS property allows you to change the color of an element's top border independently of other borders. This property is useful when you want to create distinctive visual effects or highlight specific elements.
Syntax
border-top-color: color-value;
The color value can be specified using color names, hex codes, RGB values, or HSL values.
Example
<html>
<head>
<style>
p.demo {
border: 3px solid;
border-top-color: #FF0000;
padding: 10px;
}
</style>
</head>
<body>
<p class="demo">
Example showing border top color property
</p>
</body>
</html>
Multiple Color Formats
You can specify colors using different formats:
<html>
<head>
<style>
.example1 {
border: 3px solid;
border-top-color: red;
padding: 8px;
margin: 5px;
}
.example2 {
border: 3px solid;
border-top-color: rgb(0, 128, 255);
padding: 8px;
margin: 5px;
}
.example3 {
border: 3px solid;
border-top-color: hsl(120, 100%, 50%);
padding: 8px;
margin: 5px;
}
</style>
</head>
<body>
<p class="example1">Color name: red</p>
<p class="example2">RGB: rgb(0, 128, 255)</p>
<p class="example3">HSL: hsl(120, 100%, 50%)</p>
</body>
</html>
Key Points
- The element must have a border defined for
border-top-colorto be visible - If no border width is specified, the color won't show
- This property only affects the top border; other borders remain unchanged
- Works with all CSS color formats: names, hex, RGB, RGBA, HSL, HSLA
Conclusion
The border-top-color property provides precise control over the top border color of elements. Use it to create visual emphasis or unique design effects while maintaining consistent styling for other borders.
Updated on: 2026-03-15T23:18:59+05:30
199 Views
Advertisements