CSS-Eigenschaft border-top-style

Die CSS-Eigenschaft border-top-style definiert den Stil des oberen Randes eines Elements.

Die Eigenschaft border-top-style wird als einzelnes Schlüsselwort, das aus den für die Eigenschaft border-style ausgewählt wird, angegeben. Die Eigenschaft border-style wird verwendet, um den Stil für alle vier Seiten eines Elements zu definieren, aber die Eigenschaft border-top-style stellt den Stil nur für den oberen Rand des Elements ein.

Die Standardbreite des rechten Randes ist mittel. Sie kann geändert werden, indem man entweder die Eigenschaften border-top-width oder border-width verwendet.

Nicht alle Browser rendern die Styles auf die gleiche Weise. Chrom zum Beispiel rendert die Punkte derzeit als rechteckige Punkte, nicht als kreisförmige.

Die Spezifikation gibt den Abstand zwischen den Punkten und den Strichen nicht an.

Die Spezifikation definiert nicht, wie sich die Grenzen verschiedener Stile in den Ecken verbinden.

Anfangswert	none
Gilt für	Alle Elemente. Es gilt für ::first-letter.
Geerbt	Nein
Animierbar	Nein
Version	CSS1
DOM Syntax	object.style.borderTopStyle = "dashed";

Syntax

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

Beispiel

<!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>Eine Überschrift mit dashed border-top-style.</h2>
    <p>Ein Absatz mit dotted border-top-style.</p>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel mit allen Stilwerten, wo man die Unterschiede zwischen ihnen sehen kann:

Abhängig vom Wert der Eigenschaft border-color können die Auswirkungen von den Werten groove, ridge, inset und outset verändert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>
    <h2>Ein Beispiel für border-top-style</h2>
    <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>

Versuch es selber!

Werte

Wert	Beschreibung
none	Es definiert, dass es keinen Rand geben wird. Standardwert.
hidden	Es ist das gleiche mit "none" außer bei der Lösung von Grenzkonflikten für Tabellenelemente.
dotted	Es definiert einen verflixten Rahmen.
dashed	Es definiert einen gestrichelten Rahmen.
double	Es definiert einen doppelten Rahmen.
solid	Es definiert einen festen Rahmen.
groove	Es definiert einen 3D-Rillenrand. Seine Wirkung kann mit dem Wert border-color geändert werden.
ridge	Es definiert einen 3D-Rand mit Rillen. Seine Wirkung kann mit dem Wert border-color geändert werden.
inset	Es definiert einen 3D-Einschubrahmen. Seine Wirkung kann mit dem Wert border-color geändert werden.
outset	Es definiert einen 3D-Anfangsrahmen. Seine Wirkung kann mit dem Wert border-color geändert werden.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erzeugt die Eigenschaft von ihrem übergeordneten Element.