CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS properties are used to style HTML elements and make them visually appealing. One such property is border-top-color, which is used to set the color of the top border of an element.
The border-top-color property is a part of the border shorthand property, which is used to set the border properties of an element in one declaration. The border shorthand property can be used to set the border-width, border-style, and border-color properties of an element. The border-top-color property is used to set the color of the top border of an element.
The syntax for using the border-top-color property is as follows:
<element> {
border-top-color: color;
}
Here, the element is the HTML element for which the border-top-color property is being set, and color is the color value that is being assigned to the top border of the element.
The color value can be specified in different formats, such as:
Let's take a look at some code examples to understand the usage of the border-top-color property:
Example 1: Setting the border-top-color property using color name
<div style="border: 2px solid; border-top-color: red;">
This is a div element with a red top border.
</div>
Output:
Example 2: Setting the border-top-color property using RGB value
<div style="border: 2px solid; border-top-color: rgb(0, 255, 0);">
This is a div element with a green top border.
</div>
Output:
Example 3: Setting the border-top-color property using hexadecimal value
<div style="border: 2px solid; border-top-color: #0000FF;">
This is a div element with a blue top border.
</div>
Output:
Example 4: Setting the border-top-color property using the border shorthand property
<div style="border: 2px solid red;">
This is a div element with a red top border.
</div>
Output:
As we can see from the above examples, the border-top-color property can be used to set the color of the top border of an element in different ways. It is a useful property for styling HTML elements and making them visually appealing.