CSS border-top-color Property

Description

The border-top-color property specifies 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: The computed color
Animatable: Yes
CSS Version: CSS2, CSS3
JavaScript syntax: object.style.borderTopColor

Syntax

border-top-color: <color>

Values

<color>The computed value of the 'color' property. This value can be a basic color keyword, such as red or green, a numerical value, an RGB or RGBA value, or an HSL or HSLA value.
transparentFully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
inherit

Example

HTML

<div class="border">This is an example of the border-tpo-color property using a red solid border 3px in width.</div>

CSS

.border {
   border: 1px solid blue;
   border-top-style: solid;
   border-top-width: 3px;
   border-top-color: red;
   margin: 20px;
   padding: 20px;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 12th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu