CSS border-top-color: Set or Change the Color of the Top Border

The CSS border-top-color property is used when we need to change the color of the top border. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border: 10px solid gray; border-top-color: darkred;}
      p {border: 4px solid salmon; border-top-color: forestgreen;}
   </style>
</head>
<body>

   <h2>The border-top-color Property</h2>
   <p>This is a para.</p>
   
</body>
</html>
Output

The border-top-color Property

This is a para.

In the above example, the following CSS code:

h2 {border: 10px solid gray; border-top-color: darkred;}

sets the border properties for every "h2" element it targets. The border's parameters are 10 pixels wide, solid, and gray in color. The "h2" element's top border is specifically made dark red by the "border-top-color" property.

Whereas the following CSS code:

p {border: 4px solid salmon; border-top-color: forestgreen;}

targets all "p" elements and sets their border properties. The border is set to a 4-pixel width, a solid style, and a salmon color. The "border-top-color" property specifically sets the color of the top border of the "p" element to forest green.

Finally, the code includes an "h2" element with the text "The border-top-color Property" and a "p" element with the text "This is a para.". Both elements have borders, but the top border of the "h2" element is dark red, while the top border of the "p" element is forest green.

CSS border-top-color syntax

The syntax of the border-top-color property in CSS is:

border-top-color: color|transparent|initial|inherit;

The color is used to specify the particular color. The transparent is used to define the transparent color. The initial is used for the default value. And inherit is used when we need to inherit the value from its parent.

Advantages of the border-top-color property in CSS

Disadvantages of the border-top-color property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!