CSS border-top-color Property

This property sets the color of an element's top border. It allows you to color the top edge of a box independently from the other three sides.

selector { border-top-color: value; }
<color> Specifies the color of the top border using keywords, hex, RGB, RGBA, HSL, or HSLA values.
transparent Sets the top border color to be fully see-through, allowing the background to show.
currentcolor Sets the border color to match the current value of the element's color property.
inherit Forces the element to take the border-top-color value of its parent element.

Code Examples

A basic example showing how to apply a hex color to the top border of a div.

<div style="border-top-style: solid; border-top-width: 5px; border-top-color: #ff9900; padding: 20px;">
  This box has a solid orange top border.
</div>

An advanced example using JavaScript to dynamically change the top border color to reflect a state change in the application.

<div id="statusBox" style="border-top: 8px solid #cccccc; padding: 20px; background: #f4f4f4;">
  <p>System Status: <span id="statusText">Idle</span></p>
  <button onclick="updateStatus()">Activate System</button>
</div>

<script>
function updateStatus() {
  const box = document.getElementById("statusBox");
  const text = document.getElementById("statusText");
  box.style.borderTopColor = "#00cc00";
  text.innerText = "Running";
  text.style.color = "#00cc00";
}
</script>

Pro Tip

You can use a transparent top border color as a placeholder. This is great for hover effects where you want a border to appear on the top of a button or menu item. By having a transparent border already there, the element won't "jump" or shift position when the color is applied on hover, because the width was already accounted for in the layout.

Deep Dive

Think of the box model as a house you are painting. The border-top-color property is like choosing a specific paint for just the top trim of a window frame. However, you cannot paint a trim that does not exist. For this property to have any visual effect, you must first define a border-top-style or a general border-style (like solid or dashed). By default, if no color is specified, the browser uses the element's text color. It is a sub-property of the border-top shorthand and the overall border shorthand, meaning those shorthand properties can overwrite specific color settings if they appear later in your CSS.

Best Practices

Use this property when you only need to modify the top border color without affecting the width or style. This keeps your CSS lean and specific. If you find yourself setting all four sides to different colors, consider if the border-color shorthand is more efficient. Always ensure the border-top-style is set, otherwise your color choice will be invisible.

Common Pitfalls

The most common mistake is applying a color and wondering why it is not showing up. If the border-top-style is set to "none" or "hidden", the border has no width, and therefore the color cannot be rendered. Another thing to watch for is shorthand ordering; if you define border-top-color and then define border-top: 2px solid #000; below it, your specific color will be overwritten by the shorthand.

Accessibility

Color should not be the only way you communicate information to the user. If you are changing a border color to indicate an error or a success state, ensure there are other indicators like icons or text. Also, maintain a high enough contrast ratio between the border color and the background color so that users with visual impairments can actually see the boundary of the element.

Dev Data Table: border-top-color property

default currentcolor
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1998
js_syntax_1 element.style.borderTopColor = "#ff0000";
js_syntax_2 element.style.setProperty("border-top-color", "#ff0000");
js_note When using the style object in JavaScript, the property follows camelCase naming conventions.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "3.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10.1" }
results render here...