This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

border-top-color

Summary

Sets the color of an element’s top border. This page explains the border-top-color value, but often you will find it more convenient to fix the border’s top color as part of a shorthand set, either border-top or border-color.

Colors can be defined several ways. For more information, see Usage.

Overview table

Initial value
color - The value of the 'color' property
Applies to
All elements
Inherited
No
Media
visual
Computed value
when taken from the ‘color’ property, the computed value of 'color’; otherwise, as specified
Animatable
Yes
CSS Object Model Property
borderTopColor
Percentages
N/A

Syntax

  • border-top-color: <color>
  • border-top-color: currentColor
  • border-top-color: inherit
  • border-top-color: transparent

Values

<color>
The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage.
inherit
currentColor, the color value inherited from parent object.
currentColor
The same as ‘color: inherit’, the color value inherited from parent object.
transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

Examples

The following example demonstrates the use of border-top-color by creating a set of 7 boxes with the rainbow colors, each box using a different way of color code representation. (Some style rules omitted for brevity.)

.box {
  border: 5px solid #efefef;
}

.named-value {
  border-top-color: red;
}

.hex-value {
  border-top-color: #FD6C02;
}

.rgb-value {
  border-top-color: rgb(255, 255, 0);
}

.rgb-percentage-value {
  border-top-color: rgb(0%, 100%, 0%);
}

.hsl-value {
  border-top-color: hsl(240, 100%, 50%);
}

.rgba-value {
  border-top-color: rgba(75, 0, 130, 0.8);
}

.hsla-value {
  border-top-color: hsla(282, 100%, 41%, 0.8);
}

View live example

<div class="box named-value">
  <h1>Named color</h1>
  <p><code>red</code></p>
</div>

<div class="box hex-value">
  <h1>Hexadecimal color</h1>
  <p><code>#FD6C02</code></p>
</div>

<div class="box rgb-value">
  <h1>RGB color</h1>
  <p><code>rgb(255, 255, 0)</code></p>
</div>

<div class="box rgb-percentage-value">
  <h1>RGB percentage color</h1>
  <p><code>rgb(0%, 100%, 0%)</code></p>
</div>

<div class="box hsl-value">
  <h1>HSL color</h1>
  <p><code>hsl(240, 100%, 50%)</code></p>
</div>

<div class="box rgba-value">
  <h1>RGB with alpha color</h1>
  <p><code>rgba(75, 0, 130, 0.8)</code></p>
</div>

<div class="box hsla-value">
  <h1>HSL with alpha color</h1>
  <p><code>hsla(282, 100%, 41%, 0.8)</code></p>
</div>

Usage

 The color value can be a property keyword, an extended keyword, or a numerical value. The two property keywords are currentColor and transparent. currentColor is the ‘color’ property value from the parent object. transparent is shorthand for transparent black, rgba(0,0,0,0).

The color value can also be a numerical value, such as one of the following:

  • a basic color keyword, such as “red”
  • a hex value, such as #ff0000
  • an red-green-blue (RGB) value, such as rgb(255,0,0)
  • an RGB-alpha (RGBA) that includes color opacity, such as rgba(255,0,0,1) or rgba(100%,0%,0%,1)
  • a hue-saturation-lightness (HSL), such as hsl(0, 100%, 50%)
  • HSLa, such as hsl(0, 100%, 50%, 1)

The color value can also be an extended keyword, such as aliceblue or lavenderblush. For a full list of extended keywords, see the CSS Color Module Level 3 spec, which is the consolidation of various specifications.

Related specifications

CSS Level 3 - Backgrounds and Borders Module
W3C Candidate Recommendation
CSS Level 2 (Revision 1)
W3C Recommendation
CSS Level 3 - Color Module
W3C Recommendation

See also

Related articles

Border

Attributions