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
Usage of border-top-color property in CSS
The border-top-color property in CSS is used to set the color of an element's top border. It only affects the color, not the width or style of the border.
Syntax
border-top-color: color | transparent | initial | inherit;
Parameters
| Value | Description |
|---|---|
color |
Any valid CSS color value (hex, rgb, color name, etc.) |
transparent |
Makes the top border transparent |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example: Basic Usage
Here's how to use the border-top-color property with different color formats:
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
border: 3px solid;
border-top-color: #FF0000;
padding: 10px;
margin: 10px;
}
.demo2 {
border: 3px solid;
border-top-color: rgb(0, 128, 255);
padding: 10px;
margin: 10px;
}
.demo3 {
border: 3px solid;
border-top-color: green;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<p class="demo1">Red top border using hex color (#FF0000)</p>
<p class="demo2">Blue top border using RGB color</p>
<p class="demo3">Green top border using color name</p>
</body>
</html>
Example: Individual Border Colors
You can set different colors for each border side:
<!DOCTYPE html>
<html>
<head>
<style>
.multicolor {
border: 4px solid;
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: orange;
padding: 15px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="multicolor">
Different color for each border side
</div>
</body>
</html>
Key Points
- The
border-top-colorproperty only works when a border is present - You must set
border-style(solid, dashed, etc.) for the color to be visible - It accepts any valid CSS color format: hex, RGB, HSL, or color names
- Default value is the current text color of the element
Conclusion
The border-top-color property provides precise control over the top border color. Use it when you need different colors for individual border sides or want to override the default border color.
Updated on: 2026-03-15T23:18:59+05:30
80 Views
Advertisements