border-color property is used to color all borders of the container with the same color.
border-top-color property provide option to fill different color from parent border-color to top border of the container.
Note: Take care of order while writing the statement in CSS, i.e CSS will take last value of the property, So, for expected output always write border-top-color below border-color.
Syntax:
border-top-color: color|transparent|initial|inherit;
Default Value : The current color of the element
Property Values:
- color: It sets the color of the Element’s top-border.
- Transparent: It specifies the transparent value of top-border.
- initial: It sets the Property to its default value.
Example: In this example, we are using the border-top-color: color property.
<!DOCTYPE html><html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: red;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:color;</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color-->
<p style="border-style:dotted;
border-top-color:coral;
width:70%;">
It is a computer science portal for geeks.</p>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using the border-top-color: transparent; property.
<!DOCTYPE html><html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: transparent;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:transparent</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color to transparent-->
<p style="border-style:dotted;
border-top-color:transparent;
width:70%;">
It is a computer science portal for geeks.</p>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using the border-top-color: initial; property.
<!DOCTYPE html><html>
<head>
<title>
CSS | border-top-color Property
</title>
<style>
h1 {
color: green;
}
h3 {
border: 2px solid green;
border-top-color: initial;
width: 50%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>border-top-color:initial;</h2>
<h3>GeeksForGeeks</h3>
<!-- Sets the color to its default value-->
<p style="border-style:dotted;
border-top-color:initial;
width:70%;">
It is a computer science portal for geeks.</p>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by css border-top-color property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0