CSS-Eigenschaft border-left

Die CSS-Eigenschaft border-left wird verwendet, um die Breite, den Linienstil und die Farbe des linken Randes von Elementen festzulegen.

Es ist eine Kurzform für die Angabe der Werte von border-left-width, border-left-style und border-left-color.

Diese drei Werte der Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und ein oder zwei von ihnen können übersehen werden.

Wenn keine Farbe angegeben ist, wird der Wert aus der Eigenschaft color übernommen. Wenn die Eigenschaft color nicht definiert ist, wird voreingestellt die schwarze Farbe verwendet.

Wenn width nicht angegeben ist, wird die mittlere Größe des Elements verwendet.

Anfangswert medium none currentColor
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Die Breite und Farbe des Randes sind animierbar.
Version CSS1
DOM Syntax object.style.borderLeft = "1px solid black";

Syntax

border-left: border-width border-style border-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border-left: 3px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für Border-left</h2>
    <div>Das ist ein Beispiel für die Eigenschaft border-left.</div>
  </body>
</html>

Die Eigenschaft border-left kann auf verschiedene Elemente angewendet werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, div {
      padding: 10px;
      }
      h1 {
      border-left: 5px solid #8ebf42;
      }
      p {
      border-left: 4px dotted #1c87c9;
      }
      div {
      border-left: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>Eine Überschrift mit einem durchgehend grünen linken Rand</h1>
    <p>Eine Überschrift mit einem gestrichelten blauen linken Rand.</p>
    <div>Ein Element div mit einem dicken doppelten linken Rand.</div>
  </body>
</html>

Erstellen Sie eine Box mit dem Element <div> und stellen Sie background-color für Ihre Box und ihren linken Rand ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border-left: 20px ridge #8ebf42;
      background-color: #ccc;
      height: 100px;
      width: 200px;
      font-weight: bold;
      text-align: center;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Diese Box hat auf der linken Seite einen Gratrand.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
border-left-width Es stellt die linke Rahmenbreite eines Elements ein. Der Standardwert ist "medium". Obligatorisher Wert.
border-left-style Es setzt den Linienstil des linken Randes eines Elements. Der Standardwert ist "none". Obligatorisher Wert.
border-left-color Es setzt die Farbe des linken Randes eines Elements. Der Standardwert ist die aktuelle Farbe des Textes.
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+ 3.5+ 1+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'border-left'?
Finden Sie das nützlich?