CSS-Eigenschaft border-top-color

Die CSS-Eigenschaft border-top-color definiert die Farbe des oberen Randes eines Elements.

Die Farbe des oberen Randes, kombiniert mit den Farben des oberen, rechten und unteren Randes, kann auch mit der Shorthand-Eigenschaft border color definiert werden.

Wenn Sie die Eigenschaft border-top-color verwenden, sollen Sie zunächst die Eigenschaften border-style oder border-top-style einstellen und dann die Farbe des definierten Styles ändern.

Die Standardbreite eines Rahmens ist mittel. Sie können die Breite entweder über die Eigenschaften border-width oder border-top-width festlegen.

Anfangswert currentColor
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja, die Farbe des oberen Randes ist animierbar.
Version CSS1
DOM Syntax object.style.borderTopColor = "black";

Syntax

border-top-color: color | transparent | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      width: 300px;
      padding: 20px;
      border-style: solid;
      border-color: #666;
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-top-color</h2>
    <div>Beispiel für die Eigenschaft border-top-color mit unterschiedlicher Farbe oben.</div>
  </body>
</html>

Ein weiteres Beispiel, wo der Wert für den oberen Rand auf transparent eingestellt ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2 {
      padding-bottom: 8px; 
      text-align: center;   
      border: 12px groove #1c87c9;
      border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem transparenten oberen Rand.</h2>
  </body>
</html>
Hexadezimale Werte, RGB, RGB, RGBA, HSL, HSLA oder Farbnamen können als Wert für die Eigenschaft border-top-color verwendet werden.

Ein CSS-Beispiel mit border-top-color, der Wert eine benannte Farbe ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Ein Beispiel mit der Eigenschaft border-top-color mit einem benannten Farbwert.</div>
  </body>
</html>

Ein weiteres Beispiel mit einem hexadezimalen Wert für die Eigenschaft border-top-color:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Ein Beispiel für border-top-color mit einem hexadezimalen Wert.</div>
  </body>
</html>

Ein weiteres Beispiel für border-top-color mit dem RGB-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Ein Beispiel für border-top-color mit einem RGB-Wert.</div>
  </body>
</html>

Ein anderes Beispiel für border-top-color mit einem HSL-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Ein Beispiel für border-top-color mit einem HSL-Wert.</div>
  </body>
</html>

Werte

Wert Beschreibung
color Es definiert die Farbe des oberen Randes. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
Erforderlicher Wert.
transparent Wirkt eine transparente Farbe auf den oberen Rand auf. Der obere Rand nimmt weiterhin den durch den Wert für die Rahmenbreite definierten Platz ein.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1+ 1+ 1+ 3.5+

Übe dein Wissen

Was bestimmt die CSS-Eigenschaft 'border-top-color'?
Finden Sie das nützlich?