CSS border-top-color Property

CSS border-top-color Property

In this tuttorial, you will learn about CSS border-top-color Property with the help of Example:

This CSS2+ property defines the color of an element’s top border.

Syntax -

border-top-color: color | transparent | inherit

Now we will see the values with their description -

Value	Description
color	This specifies the color of the top border, and its default color is the current color of an element.
transparent	This specifies the border color which should be transparent.
initial	Set this property to its default value.
inherit	Inherits this property from its parent element.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>
<style>
body{
background-color: black;
color:aliceblue;
}
.one{
border: 4px solid;
border-top-color:aquamarine;
}
.two{
border: 4px solid;
border-top-color:#865ef5;
}
.three{
border: 4px solid;
border-top-color:rgb(133, 136, 133);
}
.four{
border: 4px solid;
border-top-color:rgb(203, 87, 66);
}
.five{
border: 4px solid;
border-top-color:hsl(328, 84%, 58%);
}
.six{
border: 4px solid;
border-top-color:transparent;
}
</style>
<body>
<h1 class="one">This is a heading</h1>
<h1 class="two">This is a heading</h1>
<h1 class="three">This is a heading</h1>
<h1 class="four">This is a heading</h1>
<h1 class="five">This is a heading</h1>
<h1 class="six">This is a heading</h1>

</body>
</html>

Output -