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: unset;

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

Values

<color>
The color of the top border.

Formal definition

Initial valuecurrentcolor
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Computed valuecomputed color
Animation typea color

Formal syntax

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <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>? )

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 Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-top-color' in that specification.
Candidate Recommendation No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed.
CSS Level 2 (Revision 1)
The definition of 'border-top-color' in that specification.
Recommendation Initial definition

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-top-colorChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support
Full support
See implementation notes.
See implementation notes.

See also