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>

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>

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

Which of the following statements are correct about the CSS 'border-left-style' property?
Finden Sie das nützlich?