CSS-Eigenschaft border-left-style

Die CSS-Eigenschaft border-left-style wird verwendet, um den Stil des linken Randes eines Elements zu definieren.

Die Eigenschaft border-left-style wird als ein einziges Schlüsselwort, das aus den für die Eigenschaft border-style verfügbaren Eigenschaften ausgewählt wird, angegeben. Die Eigenschaft border-style wird verwendet, um den Stil für alle vier Seiten eines Elements festzulegen, aber border-left-style stellt einen Stil nur für den linken Rand ein.

Die Standardbreite des linken Randes ist mittel. Sie kann geändert werden, indem man entweder die Eigenschaft border-left-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 Punkte.

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

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

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      border-left-style: solid;
      }
      div {
      border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p>Beispiel mit solid border-left-style.</p>
    <div>Beispiel mit dotted border-left-style.</div>
  </body>
</html>

Versuch es selber!

Nun sehen wir ein Beispiel, wo alle Style-Werte separat verwendet werden, um den Unterschied zwischen ihnen zu sehen:

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #c9c5c5;
      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: #8ebf42;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-left-style example classes */
      .b1 { border-left-style: hidden; }
      .b2 {border-left-style: dotted;}
      .b3 {border-left-style: dashed;}
      .b4 {border-left-style: solid;}
      .b5 {border-left-style: double;}
      .b6 {border-left-style: groove;}
      .b7 {border-left-style: ridge;}
      .b8 {border-left-style: inset;}
      .b9 {border-left-style: outset;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-left-style mit Werten</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.