CSS border-top-style Eigenschaft

Die CSS-Eigenschaft border-top-style legt den Linienstil des oberen Rahmens eines Elements fest — ob er als durchgezogene Linie, gestrichelte Linie, 3D-Rille oder auf andere Weise dargestellt wird.

Sie akzeptiert ein einzelnes Schlüsselwort aus denselben Werten, die auch der Kurzschreibweise border-style zur Verfügung stehen. Der Unterschied liegt im Anwendungsbereich: border-style legt den Stil aller vier Seiten gleichzeitig fest, während border-top-style nur den oberen Rand betrifft. Die entsprechenden seitenspezifischen Eigenschaften für die anderen Ränder sind border-right-style, border-bottom-style und border-left-style.

Wann verwenden

Greifen Sie auf border-top-style zurück, wenn ein Rand anders aussehen soll als die anderen — zum Beispiel ein gepunkteter Trenner über einem Footer, eine gestrichelte Linie über einem „Weiterlesen"-Block oder eine einzelne durchgezogene Linie am oberen Rand einer Karte, während die anderen Seiten rahmenlos bleiben. Wenn alle Seiten denselben Stil benötigen, ist die Kurzschreibweise border-style kürzer.

Ein Rahmen wird nur gezeichnet, wenn sein Stil gesetzt ist. Standardmäßig ist border-top-style auf none gesetzt, sodass selbst wenn Sie eine obere Farbe oder Breite angeben, nichts angezeigt wird, bis Sie dem oberen Rand einen Stil zuweisen. Die Standardbreite eines sichtbaren oberen Rahmens ist medium; ändern Sie sie mit border-top-width oder der Kurzschreibweise border-width, und legen Sie die Farbe mit border-color fest.

Das Rendering ist nicht pixelidentisch in allen Browsern. Chrome zeichnet beispielsweise dotted-Rahmen als kleine Quadrate statt als runde Punkte, und der Abstand zwischen Punkten und Strichen ist jedem Browser-Engine überlassen.

Info

Die Spezifikation legt den Abstand zwischen den Punkten und den Strichen nicht fest.

Info

Die Spezifikation definiert nicht, wie Rahmen mit unterschiedlichen Stilen in den Ecken verbunden werden.

Standardwert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbung	Nein
Animierbar	Nein
Version	CSS1
DOM Syntax	object.style.borderTopStyle = "dashed";

Syntax

Syntax der CSS border-top-style Eigenschaft

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Beispiel der border-top-style Eigenschaft:

Beispiel der CSS border-top-style Eigenschaft mit den Werten dashed und dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2,
      p {
        padding: 15px;
        border: solid #666;
      }
      h2 {
        border-top-style: dashed;
      }
      p {
        border-top-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with dashed border-top-style.</h2>
    <p>A paragraph with dotted border-top-style.</p>
  </body>
</html>

Probier es selbst »

Info

Abhängig vom Wert der border-color können die Effekte der Werte groove, ridge, inset und outset verändert werden.

Ergebnis

Beispiel der border-top-style Eigenschaft mit allen Stilwerten:

Beispiel der CSS border-top-style Eigenschaft mit den Werten hidden, dotted, dashed, solid, double, groove, ridge, inset und outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #1c87c9;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-style example classes */
      .b1 {
        border-top-style: hidden;
      }
      .b2 {
        border-top-style: dotted;
      }
      .b3 {
        border-top-style: dashed;
      }
      .b4 {
        border-top-style: solid;
      }
      .b5 {
        border-top-style: double;
      }
      .b6 {
        border-top-style: groove;
      }
      .b7 {
        border-top-style: ridge;
      }
      .b8 {
        border-top-style: inset;
      }
      .b9 {
        border-top-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Probier es selbst »

Info

Die Werte groove, ridge, inset und outset erzeugen einen gefälschten 3D-Effekt, indem die border-color aufgehellt und abgedunkelt wird. Auf einem solid- oder einfarbigen Hintergrund können sie fast flach wirken — der Effekt ist am deutlichsten bei einer mittleren Farbe und einem Rahmen von mindestens einigen Pixeln Stärke.

Werte

Wert	Beschreibung	Ausprobieren
none	Definiert, dass kein Rahmen angezeigt wird. Standardwert.	Ausprobieren »
hidden	Entspricht „none", außer bei der Auflösung von Rahmenkonflikten bei Tabellenelementen.	Ausprobieren »
dotted	Definiert einen gepunkteten Rahmen.	Ausprobieren »
dashed	Definiert einen gestrichelten Rahmen.	Ausprobieren »
double	Definiert einen doppelten Rahmen.	Ausprobieren »
solid	Definiert einen durchgezogenen Rahmen.	Ausprobieren »
groove	Definiert einen 3D-gerillten Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.	Ausprobieren »
ridge	Definiert einen 3D-Rahmen mit Grat. Der Effekt kann durch den Wert von border-color verändert werden.	Ausprobieren »
inset	Definiert einen 3D-eingelassenen Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.	Ausprobieren »
outset	Definiert einen 3D-hervorstehenden Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche der folgenden Optionen sind gültige Werte für die 'border-top-style' Eigenschaft in CSS?

Wann verwenden

Syntax

Beispiel der border-top-style Eigenschaft:

Ergebnis

Beispiel der border-top-style Eigenschaft mit allen Stilwerten:

Werte

Verwandte Eigenschaften

Übung