border-top-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theborder-top-colorCSS property sets the color of an element's topborder. It can also be set with the shorthand CSS propertiesborder-color orborder-top.
Try it
border-top-color: red;border-top-color: #32a1ce;border-top-color: rgb(170 50 220 / 0.6);border-top-color: hsl(60 90% 50% / 0.8);border-top-color: transparent;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eeeeee; color: black; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}Syntax
css
/* <color> values */border-top-color: red;border-top-color: #ffbb00;border-top-color: rgb(255 0 0);border-top-color: hsl(100deg 50% 25% / 75%);border-top-color: currentColor;border-top-color: transparent;/* Global values */border-top-color: inherit;border-top-color: initial;border-top-color: revert;border-top-color: revert-layer;border-top-color: unset;Theborder-top-color property is specified as a single value.
Values
<color>The color of the top border.
Formal definition
| Initial value | currentcolor |
|---|---|
| Applies to | all elements. It also applies to::first-letter. |
| Inherited | no |
| Computed value | computed color |
| Animation type | acolor |
Formal syntax
border-top-color =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
Examples
A div with a border
HTML
html
<div> <p> This is a box with a border around it. Note which side of the box is <span>red</span>. </p></div>CSS
css
.my-box { border: solid 0.3em gold; border-top-color: red; width: auto;}.red-text { color: red;}Result
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
Browser compatibility
See also
- The border-related CSS shorthand properties:
border,border-top, andborder-color. - The color-related CSS properties for the other borders:
border-right-color,border-bottom-color, andborder-left-color. - The other border-related CSS properties applying to the same border:
border-top-styleandborder-top-width. - The default
currentColorcolor value.