CSS border-top-style-Eigenschaft

Die CSS-Eigenschaft border-top-style dient dazu, den Stil des oberen Rands eines Elements festzulegen.

Diese Eigenschaft wird als einzelnes Schlüsselwort angegeben, das aus den für die Eigenschaft border-style verfügbaren Werten ausgewählt wird. Die Eigenschaft border-style wird verwendet, um den Stil für alle vier Seiten eines Elements festzulegen, während border-top-style einen Stil nur für den oberen Rand definiert.

Die Standardbreite des oberen Rands beträgt medium. Sie kann durch Verwendung der Eigenschaften border-top-width oder border-width geändert werden.

Nicht alle Browser rendern die Stile auf die gleiche Weise. Chrome stellt die Punkte rechteckig dar, nicht kreisförmig.

INFO

Die Spezifikation gibt keine genaue Angabe zum Abstand zwischen den Punkten und den Strichen.

INFO

Die Spezifikation definiert nicht, wie sich Ränder unterschiedlicher Stile in den Ecken verbinden.

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

Syntax

Syntax der CSS border-top-style-Eigenschaft

css

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

Beispiel für die border-top-style-Eigenschaft:

Beispiel für die CSS border-top-style-Eigenschaft mit den Werten dashed und dotted

html

<!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>

Try it Yourself »

INFO

Je nach Wert von border-color können sich die Effekte der Werte groove, ridge, inset und outset ändern.

Ergebnis

CSS border-top-style-Eigenschaft

Beispiel für die border-top-style-Eigenschaft mit allen Stilwerten:

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

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
none	Definiert, dass kein Rand angezeigt wird. Standardwert.	Testen »
hidden	Entspricht „none“, außer bei der Auflösung von Randkonflikten bei Tabellenelementen.	Testen »
dotted	Definiert einen gepunkteten Rand.	Testen »
dashed	Definiert einen gestrichelten Rand.	Testen »
double	Definiert einen doppelten Rand.	Testen »
solid	Definiert einen durchgehenden Rand.	Testen »
groove	Definiert einen 3D-Nut-Rand. Der Effekt kann mit dem Wert von border-color geändert werden.	Testen »
ridge	Definiert einen 3D-Kamm-Rand. Der Effekt kann mit dem Wert von border-color geändert werden.	Testen »
inset	Definiert einen 3D-Einschnitt-Rand. Der Effekt kann mit dem Wert von border-color geändert werden.	Testen »
outset	Definiert einen 3D-Ausschnitt-Rand. Der Effekt kann mit dem Wert von border-color geändert werden.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

CSS border-top-style-Eigenschaft ​

Syntax ​

Beispiel für die border-top-style-Eigenschaft: ​

Ergebnis ​

Beispiel für die border-top-style-Eigenschaft mit allen Stilwerten: ​

Werte ​

Praxis ​

CSS border-top-style-Eigenschaft

Syntax

Beispiel für die border-top-style-Eigenschaft:

Ergebnis

Beispiel für die border-top-style-Eigenschaft mit allen Stilwerten:

Werte

Praxis