CSS border-top-color Property

CSS border-top-color Property

The border-top-color property in CSS is used to define the color of the top border of an element. It specifically targets the top edge of an element, allowing you to control its color independently of the other borders.

1. Syntax

selector {
  border-top-color: value;
}

Value	Description
color	Specifies the color of the top border. Can be any valid color value (e.g., #hex, rgb(), rgba(), hsl(), color name).
inherit	Inherits the top border color from the parent element.

2. Example – Using border-top-color

div {
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #333;
}

<div>
  This div has a solid top border with a color of #333 (dark gray).
</div>

✅ The top border of the <div> will be 5px thick, solid, and colored #333 (dark gray).

3. Example – Using Color Names

You can also use color names to set the top border color:

div {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: blue;
}

✅ The top border of the <div> will be 3px thick, solid, and blue.

4. Example – Using rgba() for Transparency

You can use rgba() values to define colors with transparency:

div {
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: rgba(0, 128, 0, 0.5);
}

✅ The top border of the <div> will be 5px thick, solid, and a semi-transparent green (50% opacity).

5. Example – Using inherit to Inherit Border Color

div {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: inherit;
}

<div>
  This div inherits its top border color from its parent.
</div>

✅ The top border color of the <div> will be inherited from its parent element.

6. Best Practices

✔ Use border-top-color along with border-top-width and border-top-style to fully customize the top border.
✔ For simpler use cases, you can use the shorthand border property to set the top border's width, style, and color all at once.
✔ For more precise control, consider using RGBA or HSL values for colors, especially if you need transparency or specific hues.