🎨 CSS border-top-color: Coloring the Top Border with Precision

Borders help visually define elements, but sometimes you want to style just the color of a specific border side without changing its width or style. The border-top-color property lets you do exactly that — target the top border’s color of an element independently.

---

🧾 What is border-top-color?

border-top-color is a CSS property that specifies the color of the top border of an element. It only affects the color; the width and style of the border must be set separately for the color to show.

---

🧬 Syntax

selector {
  border-top-color: <color>;
}

Accepted values:

• Named colors (e.g., red, blue, teal)
• Hex codes (e.g., #ff6600, #000000)
• RGB or RGBA (e.g., rgb(255,0,0), rgba(0,0,255,0.5))
• HSL or HSLA (e.g., hsl(120, 100%, 50%))
• transparent (makes the border color invisible)
• inherit (inherits color from parent)

---

🎯 Examples

1. Changing top border color to red

.box {
  border-top-style: solid;
  border-top-width: 3px;
  border-top-color: red;
}

The top border is a solid 3px line colored red.

---

2. Using RGBA for semi-transparent top border

header {
  border-top-style: solid;
  border-top-width: 5px;
  border-top-color: rgba(0, 128, 255, 0.4);
}

Adds a semi-transparent blue top border, great for subtle UI effects.

---

3. Transparent top border for spacing

.section {
  border-top-style: solid;
  border-top-width: 4px;
  border-top-color: transparent;
}

Creates space at the top edge without visible color.

---

🔍 How It Works

• The border’s style must not be none for the color to appear.
• If border-top-color is not set, it defaults to the element’s text color.
• Can be combined with shorthand border-top or set individually.

---

🛠️ Tips and Best Practices

• Use it when you want to change the color without affecting style or width.
• Combine with hover states for interactive effects.
• Use semi-transparent colors for layering and depth.
• For complete border styling, consider using the shorthand border-top.

---

✅ Browser Support

Fully supported in all major browsers:

• Chrome
• Firefox
• Safari
• Edge
• Internet Explorer 8+

---

🔚 Conclusion

The border-top-color property offers precise control over the color of the top border without interfering with width or style. It’s a handy tool to add subtle or bold color accents to your page’s layout and design.

---