We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

border-top-color Redirect 1


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

  • Initial value currentColor
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • Animatable yes, as a color
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <color>
border-top-color: red
border-top-color: rgb(255, 128, 0)
border-top-color: hsla(100%, 50%, 25%, 0.75)
border-top-color: #ffbb00
border-top-color: currentColor
border-top-color: transparent

border-top-color: inherit


Is a <color> CSS value describing the color of the top border.
Is a keyword denoting the color of the top border of the parent's element (which may be different from the border-top-color default value)


pre {
    border: solid 0.3em gold;
    border-top-color: red;
/* this has the same result:
pre {
        border: solid 0.3em;
        border-color: red gold gold; 
} */


Specification Status Comment
CSS Backgrounds and Borders Module Level 3 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) Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) [1] 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) [1] (Yes) (Yes) (Yes)

[1] Gecko-based browsers like Firefox also supports the non-standard -moz-border-top-colors CSS properties that sets the top border to multiple colors.

See also

Document Tags and Contributors

Last updated by: Sheppy,