This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



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
Computed value
when taken from the ‘color’ property, the computed value of 'color’; otherwise, as specified
CSS Object Model Property


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


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.
currentColor, the color value inherited from parent object.
The same as ‘color: inherit’, the color value inherited from parent object.
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.


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>

<div class="box hex-value">
  <h1>Hexadecimal color</h1>

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

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

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

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

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


 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