CSS border-left-style Eigenschaft

Die CSS-Eigenschaft border-left-style legt den Stil des linken Rahmens eines Elements fest. Sie akzeptiert ein einzelnes Schlüsselwort aus derselben Wertemenge, die auch der border-style-Kurzschreibweise zur Verfügung steht. Im Gegensatz zu border-style, das den Stil aller vier Seiten gleichzeitig setzt, wirkt border-left-style nur auf die linke Kante.

Diese Eigenschaft wird mit border-left-width und border-left-color kombiniert, oder Sie können alle drei gleichzeitig mit der Kurzschreibweise border-left setzen. Ein Rahmen ist erst sichtbar, wenn sein Stil auf etwas anderes als den Standardwert none gesetzt wird — selbst eine großzügige Breite und eine kräftige Farbe werden nicht angezeigt, bis ein Stil angewendet wird.

Die Standardbreite des linken Rahmens ist medium. Passen Sie diese mit der Eigenschaft border-left-width oder border-width an.

Nicht alle Browser stellen denselben Stil identisch dar. Chrome beispielsweise zeichnet die Punkte eines dotted-Rahmens als kleine Quadrate statt als Kreise, und die 3D-Werte (groove, ridge, inset, outset) hängen von der Rahmenfarbe ab, um ihren Licht-und-Schatten-Effekt zu erzeugen.

Info

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

Info

Die Spezifikation definiert nicht, wie Rahmen mit unterschiedlichen Stilen an den Ecken verbunden werden.

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

Syntax

Syntax der CSS border-left-style Eigenschaft

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

Beispiel der border-left-style Eigenschaft:

Beispiel der CSS border-left-style Eigenschaft mit den Werten solid und dotted

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

Probier es selbst »

Info

Je nach dem Wert von border-color können die Effekte der Werte groove, ridge, inset und outset verändert werden.

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

Beispiel der CSS border-left-style Eigenschaft mit den Werten hidden, dotted, dashed, solid, double, groove, ridge, inset und outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>
    <h1>Border-left-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>

Probier es selbst »

Ergebnis

Werte

Wert	Beschreibung	Ausprobieren
none	Definiert, dass kein Rahmen vorhanden ist. Standardwert.
hidden	Wie `none`, außer bei der Auflösung von Rahmenkonflikten für Tabellenelemente, wo der linke Rahmen vollständig aus der Darstellung entfernt wird.
dotted	Definiert einen gepunkteten Rahmen.
dashed	Definiert einen gestrichelten Rahmen.
double	Definiert einen doppelten Rahmen.
solid	Definiert einen durchgehenden Rahmen.
groove	Definiert einen 3D-Nutrahmen. Der Effekt kann durch den Wert von border-color verändert werden.
ridge	Definiert einen 3D-Gratrahmen. Der Effekt kann durch den Wert von border-color verändert werden.
inset	Definiert einen 3D-Einlassrahmen. Der Effekt kann durch den Wert von border-color verändert werden.
outset	Definiert einen 3D-Auslassrahmen. Der Effekt kann durch den Wert von border-color verändert werden.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Wann zu verwenden

Verwenden Sie border-left-style, wenn Sie einen stilisierten Akzent nur an der linken Kante möchten — ein gängiges Muster für Blockzitate, Hinweiskarten und aktive Seitenleistenelemente, bei denen ein einzelner farbiger Balken das Element markiert, ohne es einzurahmen. Für denselben Effekt auf den anderen Seiten verwenden Sie border-top-style, border-right-style oder border-bottom-style. Wenn alle vier Kanten denselben Stil teilen, ist die Kurzschreibweise border-style kürzer.

Übung

Welche Werte kann die Eigenschaft 'border-left-style' in CSS annehmen?