CSS border-top Eigenschaft

Die CSS-Eigenschaft border-top legt Breite, Stil und Farbe des oberen Rahmens eines Elements in einer einzigen Deklaration fest. Es handelt sich um eine Kurzschreibweise, die drei Langform-Eigenschaften kombiniert: border-top-width, border-top-style und border-top-color.

Diese Seite behandelt die Syntax der Eigenschaft, die Bedeutung der einzelnen Werte, die Auflösung ausgelassener Werte und praktische Beispiele zum Ausprobieren.

Wann sollte man es verwenden

Verwenden Sie border-top, wenn Sie einen Rahmen nur am oberen Rand eines Elements möchten — zum Beispiel als Trennlinie über einer Fußzeile, als obere Akzentlinie auf einer Karte oder als Linie zwischen gestapelten Listenelementen. Wenn Sie denselben Rahmen an allen vier Seiten benötigen, verwenden Sie stattdessen die Kurzschreibweise border; für vollständige seitenweise Kontrolle verwenden Sie border-top, border-right, border-bottom und border-left zusammen.

Angabe der Werte

Die drei Werte können in beliebiger Reihenfolge angegeben werden, und Sie können einen oder zwei davon weglassen. Jeder ausgelassene Wert fällt auf seinen Anfangswert zurück:

Der Stil ist erforderlich, damit ein Rahmen sichtbar wird. Der Anfangswert von border-top-style ist none, d. h. wenn Sie den Stil weglassen, wird kein Rahmen gerendert — auch wenn Sie eine Breite und Farbe festgelegt haben.
Wenn Sie die Farbe weglassen, verwendet der Rahmen den color-Wert des Elements (currentColor). Wenn color nicht gesetzt ist, wird er vererbt oder standardmäßig auf Schwarz gesetzt.
Wenn Sie die Breite weglassen, fällt sie auf medium zurück (in den meisten Browsern ungefähr 3px).

Anfangswert	medium none currentColor
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbt	Nein
Animierbar	Ja. Farbe und Breite des Rahmens sind animierbar.
Version	CSS1
DOM Syntax	object.style.borderTop = "1px solid black";

Syntax

Syntax der CSS border-top Eigenschaft

border-top: border-width border-style border-color | initial | inherit;

Beispiel der border-top Eigenschaft:

Beispiel der CSS border-top Eigenschaft mit dem Wert solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-top: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top example</h2>
    <div> This is a simple example for the border-top property.</div>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS border-top Eigenschaft](/uploads/media/default/0001/03/2f035228f6c0a9e922d16e119bd24dba1d27241b.png "CSS border-top Property" =420x)

Beispiel der border-top Eigenschaft für verschiedene Elemente:

Beispiel der CSS border-top Eigenschaft mit den Werten dotted, solid und double

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-top: 5px solid #8ebf42;
      }
      p {
        border-top: 4px dotted #1c87c9;
      }
      div {
        border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green top border</h1>
    <p>A heading with a dotted blue top border.</p>
    <div>A div element with a thick double top border.</div>
  </body>
</html>

Probier es selbst »

Sie können eine Box mit dem Element <div> erstellen, eine background-color für Ihre Box festlegen und den oberen Rahmen definieren.

Beispiel für die Verwendung der border-top Eigenschaft zum Erstellen einer Box mit einem Ridge-Rahmen:

Beispiel der CSS border-top Eigenschaft mit dem Wert ridge

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-top: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the top.</p>
    </div>
  </body>
</html>

Probier es selbst »

Häufige Fallstricke

Es wird nichts angezeigt? Der häufigste Fehler ist das Weglassen des Stils. border-top: 2px #1c87c9; rendert nichts, weil der Stil standardmäßig auf none gesetzt ist. Fügen Sie ein Stil-Schlüsselwort wie solid hinzu: border-top: 2px solid #1c87c9;.
Rahmen vergrößern das Element. Ein oberer Rahmen erhöht die gerenderte Höhe, sofern box-sizing nicht auf border-box gesetzt ist. Beachten Sie dies beim Ausrichten von Elementen mit und ohne Rahmen.
Längen-Schlüsselwörter für die Breite. Neben expliziten Längenangaben wie 3px akzeptiert die Breite auch die Schlüsselwörter thin, medium und thick. Ihre genauen Pixelwerte sind browserdefiniert.

Werte

border-top akzeptiert selbst keine benannten Schlüsselwortwerte für die Rahmenteile direkt — stattdessen nimmt es die Werte seiner drei Langform-Eigenschaften sowie die globalen Schlüsselwörter initial und inherit entgegen:

Wert	Beschreibung
border-top-width	Legt die Breite des oberen Rahmens eines Elements fest. Der Standardwert ist "medium". Erforderlicher Wert.
border-top-style	Legt den Linienstil des oberen Rahmens eines Elements fest. Der Standardwert ist "none". Erforderlicher Wert.
border-top-color	Legt die Farbe des oberen Rahmens eines Elements fest. Der Standardwert ist die aktuelle Textfarbe.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was ist die korrekte Syntax, um die CSS-Eigenschaft 'border-top' zu setzen?

border-top: 10px solid red;border.top: 10px solid red;borderTop: 10px solid red;border-top = 10px solid red;