RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-top-color below:

border-top-color · WebPlatform Docs

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