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>

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>

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.

Browser-Support

chrome firefox safari opera
1+ 1+ 1+ 9.2+

Übe dein Wissen

Welche Werte können Sie für die CSS-Eigenschaft 'border-top-style' verwenden?
Finden Sie das nützlich?