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

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

Browser compatibility

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

Legend

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: mfuji09,