CSS border-top-color Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-top-color CSS property is used to define the color of the top border of an element. It allows web developers to specify the desired color using various formats, such as color names, hexadecimal values, RGB, or HSL color codes. By setting this property, designers can control the visual appearance of an element's top border, enabling them to create visually appealing and customized designs for elements like divs, tables, or other HTML elements with borders. This property is part of the broader set of border-related properties in CSS, which collectively enable precise control over an element's border styling.

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="border">This is an example of the border-tpo-color property using a red solid border 3px in width.</div>

CSS

.border {
   border: 1px solid blue;
   border-top-style: solid;
   border-top-width: 3px;
   border-top-color: red;
   margin: 20px;
   padding: 20px;
}

Result

Editor