CSS border-top-color Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-top-color property in CSS is used to set the color of the top border of an element.

This property is particularly useful when you want to style the top border of an element differently from the other borders, allowing for more nuanced design control. The color can be specified using any valid CSS color value.

💡 Syntax

The syntax for the border-top-color property is straightforward. You can apply this property to any element that supports borders.

Syntax

Copied

element {
  border-top-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the border-top-color property is the color of the element's color property, which means it inherits the text color if not specified otherwise.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
transparent	Makes the top border color fully transparent.
currentcolor	The current value of the color property.

📄 Example

In this example, we’ll change the top border color of a div element to red.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-top-color Example</title>
  <style>
    div {
      border: 2px solid;
      border-top-color: red;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Top Border Color</h1>
  <div>This div has a red top border.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-top-color property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works consistently in most environments, so you can use it confidently in your web projects.

🎉 Conclusion

The border-top-color property is a simple yet powerful tool for customizing the appearance of an element’s top border. By setting a specific color for the top border, you can enhance the design of your web page and create visually appealing effects. Experiment with different color values to see how this property can add a unique touch to your web design.