This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



CSS border-top-color Property

The border-top-color property defines the color of the top border of an element.

The top border color, combined with top, right, and bottom border colors, can also be defined with the border color shorthand property.

If you use the border-top-color property, you should first set the border-style or border-top-style properties and then change the color of the defined style.

The default width of a border is medium. You can specify the width using either the border-width or border-top-width properties.

Initial Value currentColor
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. The color of the top border is animatable.
Version CSS1
DOM Syntax object.style.borderTopColor = "black";

Syntax

border-top-color: color | transparent | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      width: 300px;
      padding: 20px;
      border-style: solid;
      border-color: #666;
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-color example</h2>
    <div>Example for the border-top-color property with different top border color.</div>
  </body>
</html>

Let’s see another example where the value is set to transparent for the top border.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
      padding-bottom: 8px; 
      text-align: center;   
      border: 12px groove #1c87c9;
      border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent top border</h2>
  </body>
</html>

Hexadecimal, RGB, RGBA, HSL, HSLA or color names can be applied as a value for the border-top-color property.

Let’s see a CSS border-top-color example where the value is a named color:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a named color value.</div>
  </body>
</html>

See an example where a hexadecimal value is set for the border-top-color property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a hexadecimal value.</div>
  </body>
</html>

Now consider an example with the border-top-color using an RGB value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a RGB value.</div>
  </body>
</html>

See an example with the border-top-color using a HSL value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a HSL value.</div>
  </body>
</html>

Values

Value Description
color Defines the color of the top border. Default color is the color of the current element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
Required value.
transparent Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

Border, color, border-color, border-top, border-style.

Browser support

1+ 4+ 1+ 1+ 3.5+