CSS border-top-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-top-color property determines the color used when the top edge of an element’s border is painted. It applies specifically to the top border of the element’s border box and is treated as part of the element’s border layer when the UA renders the box. The property itself does not change the border’s thickness or style; it solely influences the visual hue used for that edge when the border is actually drawn.

Whether the color is visible depends on other border-related properties. If the top border’s style is such that no border is drawn (for example, when the style is set to none or hidden), the color has no visual effect - see border-style. Similarly, the property does not affect the border’s thickness, which is controlled separately - see border-width. When a border image is applied to the element, the image takes precedence for painting the border, and the color will typically not be used for that edge - see border-image.

This property participates in the cascade and can be set directly or via shorthands. More specific declarations override less specific ones: a direct top-edge declaration will override a general border shorthand. Shorthand properties can set the top color along with other border properties; for example, the overall border shorthand or the top-edge shorthand can include the color as part of their declarations - see border and border-top. There is also a grouped color shorthand that can set colors for multiple edges at once - see border-color.

In practical rendering terms, the value of this property is treated like any color used elsewhere in CSS: it can participate in blending, compositing, and transitions. It does not inherit by default from parent elements, so if you want consistent edge colors across multiple elements you must specify them explicitly or use an appropriate shorthand. When combined with effects such as rounded corners or complex stacking contexts, the visible result will follow the normal border painting order and clipping rules of the element’s box.

Definition

Initial value: currentColor
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.borderTopColor

Interactive Demo

border-top-color: blue;

border-top-color: #ADB946;

border-top-color: rgb(25, 201, 33);

border-top-color: rgba(123, 45, 87, .5);

border-top-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-top-color: <color>

Values

<color>The computed value of the 'color' property. This value can be a basic color keyword, such as red or green, a numerical value, an RGB or RGBA value, or an HSL or HSLA value.
transparentFully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
inherit

Example

HTML

<div class="container">

  <div class="box">

    <h2>Border Top Color Example</h2>

    <p>The top border color is different from other sides.</p>

  </div>

</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: #f9f9f9;
  padding: 20px;
}

.box {
  width: 320px;
  padding: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: #bdbdbd;
  border-top-color: #ff6f00;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-top-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.