W3docs
de
Anmelden

CSS border-left-width Eigenschaft

Die Eigenschaft border-left-width definiert die Breite des linken Rahmens eines Elements. Alle Werte mit Beispielen und Übungen.

Die CSS-Eigenschaft border-left-width definiert die Breite (Stärke) des linken Rahmens eines Elements. Sie ist das Einzel-Seiten-Pendant zu border-width und ermöglicht es, nur die linke Kante zu steuern, ohne die obere, rechte oder untere Rahmenseite zu beeinflussen.

Die Breite des linken Rahmens – wie bei allen anderen Rahmenseiten – kann auch mit den Kurzschreibweisen border oder border-width festgelegt werden. Verwende border-left-width, wenn du nur die linke Kante gestalten möchtest – ein gängiges Muster für Seitenleisten, Blockzitate und „Callout"-Streifen an der Seite eines Elements.

Warum der Rahmen zuerst vorhanden sein muss

Eine Rahmenbreite allein hat keinen sichtbaren Effekt. Der Browser zeichnet einen Rahmen nur dann, wenn ein border-style gesetzt ist (der Standardstil ist none). Eine Deklaration wie border-left-width: thick; bewirkt also nichts, bis du auch einen Stil definierst. Setze ihn mit border-left-style oder der Kurzschreibweise border-style:

/* width alone — nothing renders, because the style is still `none` */
.box {
  border-left-width: thick;
}

/* correct — a style is present, so the 5px left border is painted */
.box {
  border-left-style: solid;
  border-left-width: 5px;
  border-left-color: teal;
}

Dasselbe gilt für die Farbe: Wenn du border-left-color weglässt, verwendet der Rahmen die currentColor des Elements (also seine Textfarbe).

Info

Die Spezifikation legt die genaue Stärke der einzelnen Schlüsselwörter nicht fest. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.

Info

Die Spezifikation legt nicht fest, wie Rahmen unterschiedlicher Breite und Stile in den Ecken verbunden werden.

Anfangswertmedium
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein
AnimierbarJa. Die Rahmenbreite ist animierbar.
VersionCSS1
DOM-Syntaxobject.style.borderLeftWidth = "4px";

Syntax

Syntax der CSS-Eigenschaft border-left-width

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

Beispiel der border-left-width-Eigenschaft mit dem Wert „thick":

Beispiel der CSS-Eigenschaft border-left-width mit dem Wert thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
        border-style: dashed;
        border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-width example</h2>
    <p>As you can see the width of the left border is set to thick.</p>
  </body>
</html>
Probier es selbst »

Beispiel der border-left-width-Eigenschaft mit allen Werten:

Beispiel der CSS-Eigenschaft border-left-width mit den Werten medium, thin, thick, px, initial und inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>
    <h1>Border-left-width value examples</h1>
    <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>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS border-left-width Eigenschaft](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)

Werte

WertBeschreibungAusprobieren
mediumDefiniert einen mittleren linken Rahmen. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
thinDefiniert einen dünnen linken Rahmen. Die genaue Breite wird vom User-Agent bestimmt.Ausprobieren »
thickDefiniert einen dicken linken Rahmen. Die genaue Breite wird vom User-Agent bestimmt.Ausprobieren »
lengthDefiniert die Stärke des linken Rahmens. Zum Beispiel: 10px, 5em, 8pt usw.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.
Info

Prozentwerte sind für Rahmenbreiten nicht erlaubt – border-left-width: 50% ist ungültig und die Deklaration wird ignoriert. Verwende stattdessen eine feste Längenangabe (px, em, rem) oder eines der Schlüsselwörter.

Wichtige Hinweise

  • Ein Stil ist erforderlich. Breite und Farbe haben keine Wirkung, solange border-style nicht auf etwas anderes als none gesetzt ist.
  • Die Stärke der Schlüsselwörter ist browserdefiniert. thin, medium und thick haben in der Spezifikation keine festen Pixelwerte; sie garantieren nur die Reihenfolge thin ≤ medium ≤ thick. Für pixelgenaue Designs sollte eine explizite Längenangabe verwendet werden.
  • Wirkt sich auf das Layout aus. Die Rahmenbreite wird zur gerenderten Größe des Elements addiert, es sei denn, box-sizing ist auf border-box gesetzt – in diesem Fall wird der Rahmen innerhalb der deklarierten Breite gezeichnet.
  • Animierbar. Der Wert kann übergangen und animiert werden, was border-left-width für Hover-Streifen-Effekte nützlich macht.

Verwandte Eigenschaften

Übung

Übung
Welche der folgenden Werte können mit der Eigenschaft border-left-width in CSS verwendet werden?
Welche der folgenden Werte können mit der Eigenschaft border-left-width in CSS verwendet werden?
Was this page helpful?