The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.

/* <color> values */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent;  /* Global values */ border-top-color: inherit; border-top-color: initial; border-top-color: revert; border-top-color: unset; 

border-top-color

The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.

Syntax

/* <color> values */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent;  /* Global values */ border-top-color: inherit; border-top-color: initial; border-top-color: revert; border-top-color: unset; 

The border-top-color property is specified as a single value.

Values

<color>

The color of the top border.

Formal definition

Initial value	currentcolor
Applies to	all elements. It also applies to ::first-letter.
Inherited	no
Computed value	computed color
Animation type	a color

Formal syntax

<color>
where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

A simple div with a border

HTML

<div class="mybox">   <p>This is a box with a border around it.      Note which side of the box is      <span class="redtext">red</span>.</p> </div> 

CSS

.mybox {   border: solid 0.3em gold;   border-top-color: red;   width: auto; }  .redtext {   color: red; } 

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # border-color

See also

The border-related CSS shorthand properties: border, border-top, and border-color. The color-related CSS properties for the other borders: border-right-color, border-bottom-color, and border-left-color. The other border-related CSS properties applying to the same border: border-top-style and border-top-width.

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language