Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!
You can also read the article in English (US).

The border-top-color CSS property sets the color of an element's top border. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.


/* <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.


The color of the top border.

Formal syntax


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

<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>? )

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>


A simple div with a border


<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>


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

.redtext {
  color: red;



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

Initial valuecurrentcolor
Applies toall elements. It also applies to ::first-letter.
Computed valuecomputed color
Animation typea color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1
Full support 1
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 ? Edge Mobile Full support YesFirefox Android Full support 4
Full support 4
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 11Safari iOS Full support 1Samsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Cập nhật lần cuối bởi: wbamberg,