CSS-Eigenschaft border-left-width

Die Eigenschaft border-left-width wird verwendet, um die Breite des linken Randes eines Elements zu definieren.

Die linke Rahmenbreite, sowie alle anderen Rahmenseiten, können auch mit der shorthand Eigenschaft border oder border-width definiert werden.

Um die Eigenschaft border-left-widtheinzustellen, sollen Sie zunächst die Eigenschaft border-style definieren, da Sie Grenzen benötigen, bevor Sie deren Breite einstellen. Sie können entweder die CSS-Eigenschaft border-left-style oder verwenden, um border-style zu definieren.

Die Spezifikation definiert die genaue Dicke jedes Schlüsselwortes nicht. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.

Die Spezifikation definiert nicht, wie sich die Grenzen unterschiedlicher Breite und Stile in den Ecken verbinden.

Anfangswert	medium
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, die Breite des Rahmens ist animierbar.
Version	CSS1
DOM Syntax	object.style.borderLeftWidth = "4px";

Syntax

border-left-width: medium | thin | thick | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      padding: 10px;           
      border-style: dashed;
      border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-left-width</h2>
    <p>Wie Sie sehen können, ist die Breite des linken Randes auf thick eingestellt.</p>
  </body>
</html>

Versuch es selber!

Betrachten wir ein weiteres Beispiel, wo alle Eigenschaftswerte verwendet werden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #ccc;
      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;
      border: solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-left-width example classes */
      .b1 {border-left-width: medium;}
      .b2 {border-left-width: thin;}
      .b3 {border-left-width: thick;}
      .b4 {border-left-width: 10px;}
      .b5 {border-left-width: initial;}
      .b6 {border-left-width: inherit;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-left-width mit Werten</h2>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div  class="b2">
        thin
      </div>
      <div  class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
medium	Es definiert den mittleren linken Rand. Es ist der Standardwert dieser Eigenschaft.
thin	Es definiert einen dünnen linken Rand. Es liegt an dem Benutzeragenten, die genaue Breite zu bestimmen.
thick	Es definiert einen dicken linken Rand. Es liegt an dem Benutzeragenten, die genaue Breite zu bestimmen.
length	Es definiert die Dicke der Länge des linken Randes. Zum Beispiel 10px, 5em, 8pt usw.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erzeugt die Eigenschaft von ihrem übergeordneten Element.