CSS Reference Property

border-top-color 2i6s54

The border-top-color property is used to set the color of the top border of an element. 4i3n2b

Official Syntax 2f2j3w

  • Syntax:

    border-top-color: <color>
  • Initial: currentColor
  • Applies To: all elements
  • Animatable: yes, as a <color>

Values 445h6m

<color>
See the <color> property entry for a list of possible values.

Notes 6p2z1x

The border-top-color property can also inherit the value of the element’s parent’s top border color using the keyword inherit.

Examples 5w70f

The following are all valid border-top-color values set on an element. The element’s border style and border width are also set using the border-top-width respectively.

.element {
    border-top-style: dotted;
    border-top-width: 10px;

    border-top-color: red;
    /* or */
    border-top-color: #44aacf;
    /* or */
    border-top-color: rgba(255,0,10,.5);
}
                

Live Demo 603y6q

Have a look at the live demo:

View this demo on the Codrops Playground

Browser 51c73

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by

Last updated June 4, 2020 at 2:47 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.