W3docs
de
Anmelden

CSS border-top-color Eigenschaft

Die border-top-color-Eigenschaft definiert die Farbe des oberen Rahmens eines Elements. Alle Werte mit Beispielen.

Die CSS-Eigenschaft border-top-color definiert die Farbe ausschließlich des oberen Rahmens eines Elements. Verwenden Sie sie, wenn die obere Kante sich von den anderen drei Seiten unterscheiden soll — zum Beispiel als farbiger Akzentbalken über einer Karte oder einem Abschnittstitel.

Ein Rahmen besteht aus drei Teilen: Stil, Breite und Farbe. Die Eigenschaft border-top-color steuert nur die Farbe. Allein hat sie keine sichtbare Wirkung, da der Standard-border-style none ist, der den Rahmen vollständig entfernt. Daher muss zuerst ein Stil für die obere Kante festgelegt werden — mit border-style oder border-top-style —, bevor die Farbe etwas zeichnen kann.

Um alle vier Rahmenfarben gleichzeitig statt nur die obere festzulegen, verwenden Sie die Kurzschreibweise border-color. Die entsprechenden Eigenschaften für die anderen Seiten sind border-right-color, border-bottom-color und border-left-color.

Die Standard-Rahmenbreite ist medium. Sie kann mit border-width oder border-top-width geändert werden.

AnfangswertcurrentColor
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbtNein
AnimierbarJa. Die Farbe des oberen Rahmens ist animierbar.
VersionCSS1
DOM-Syntaxobject.style.borderTopColor = "black";

Syntax

Syntax der CSS border-top-color Eigenschaft

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

Beispiel der border-top-color Eigenschaft:

Beispiel der CSS border-top-color Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-color example</h2>
    <div>Example for the border-top-color property with different top border color.</div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS border-top-color Eigenschaft

Beispiel der border-top-color Eigenschaft mit dem Wert "transparent":

Beispiel der CSS border-top-color Eigenschaft mit dem Wert transparent

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding-bottom: 8px;
        text-align: center;
        border: 12px groove #1c87c9;
        border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent top border</h2>
  </body>
</html>
Probier es selbst »
Info

Als Wert für die border-top-color Eigenschaft können hexadezimale Angaben, RGB, RGBA, HSL, HSLA oder Farbnamen verwendet werden.

Beispiel der border-top-color Eigenschaft mit einem benannten Farbwert:

Beispiel der CSS border-top-color Eigenschaft mit dem Wert darkred (benannte Farbe)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a named color value.</div>
  </body>
</html>
Probier es selbst »

Beispiel der border-top-color Eigenschaft mit einem hexadezimalen Wert:

Beispiel der CSS border-top-color Eigenschaft mit hexadezimalem Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a hexadecimal value.</div>
  </body>
</html>
Probier es selbst »

Beispiel der border-top-color Eigenschaft mit einem RGB-Wert:

Beispiel der CSS border-top-color Eigenschaft mit RGB-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a RGB value.</div>
  </body>
</html>
Probier es selbst »

Beispiel der border-top-color Eigenschaft mit einem HSL-Wert:

Beispiel der CSS border-top-color Eigenschaft mit HSL-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a HSL value.</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
colorDefiniert die Farbe des oberen Rahmens. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert.Ausprobieren »
transparentWendet eine transparente Farbe auf den oberen Rahmen an. Der obere Rahmen belegt weiterhin den durch den border-width-Wert definierten Platz.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Wichtiges im Überblick

  • Farbe allein reicht nicht aus. Da border-style standardmäßig none ist, bleibt der obere Rahmen unsichtbar, bis ein Stil gesetzt wird (solid, dashed, groove usw.). border-top-color muss immer mit einem Stil kombiniert werden.
  • currentColor ist der Standardwert. Wenn border-top-color nicht gesetzt ist, verwendet der Rahmen den color-Wert des Elements. Eine Änderung der Textfarbe color ändert auch die Farbe eines nicht explizit gestylten Rahmens.
  • transparent reserviert weiterhin Platz. Ein transparenter oberer Rahmen behält seine border-top-width, sodass das Layout nicht verschoben wird — nützlich für Hover-Effekte, die einen transparenten Rahmen durch einen sichtbaren ersetzen.
  • Jedes Farbformat ist gültig. Farbnamen, Hex (#1c87c9), rgb(), rgba(), hsl() und hsla() sind alle zulässig. Verwenden Sie rgba()/hsla() für partielle Transparenz.

Verwandte Eigenschaften

Übung

Übung
Wofür wird die Eigenschaft 'border-top-color' in CSS verwendet?
Wofür wird die Eigenschaft 'border-top-color' in CSS verwendet?
Was this page helpful?