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.

The border-top-colorCSS 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.

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 class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section>

#example-element { background-color: #eee; color: #000; 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;

The border-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	a color

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 class="my-box"> <p> This is a box with a border around it. Note which side of the box is <span class="red-text">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