W3docs
de
Anmelden

CSS border-left Eigenschaft

CSS border-left ist eine Kurzschreibweise für Breite, Stil und Farbe des linken Rahmens eines Elements – mit Beispielen und Werten.

Die CSS border-left Eigenschaft legt die Breite, den Linienstil und die Farbe des linken Rahmens eines Elements in einer einzigen Deklaration fest.

Sie ist eine Kurzschreibweise für diese drei Langform-Eigenschaften:

Warum border-left verwenden

Verwende border-left, wenn du nur einen Rahmen an der linken Kante eines Elements und nicht an allen vier Seiten möchtest. Dies ist ein gängiges Muster für Blockzitate, Seitenleisten, Navigationsmarkierungen und „Callout"-Boxen, bei denen eine einzelne Akzentlinie die linke Seite eines Blocks hervorhebt. Da es sich um eine Kurzschreibweise handelt, ist sie kürzer als das separate Aufschreiben der drei Langform-Eigenschaften. Außerdem setzt sie jeden weggelassenen Wert auf seinen Standardwert zurück.

Wie die Werte funktionieren

Die drei Werte können in beliebiger Reihenfolge angegeben werden, und einer oder zwei von ihnen können weggelassen werden:

  • Wird die Farbe weggelassen, verwendet der Rahmen die color-Eigenschaft des Elements – also dieselbe Farbe wie sein Text (das CSS-weite Schlüsselwort currentColor).
  • Wird die Breite weggelassen, ist der Standardwert medium (ungefähr 3–4 px, je nach Browser).
  • Wird der Stil weggelassen, ist der Standardwert none, was bedeutet, dass kein Rahmen gezeichnet wird – eine Deklaration wie border-left: 5px blue; zeigt also nichts an. Der Stil ist der Wert, den du fast immer angeben musst.
Anfangswertmedium none currentColor
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein
AnimierbarJa. Farbe und Breite des Rahmens sind animierbar.
VersionCSS1
DOM-Syntaxobject.style.borderLeft = "1px solid black";

Syntax

Syntax von border-left

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

Beispiel der border-left Eigenschaft:

Beispiel der CSS border-left Eigenschaft mit dem Wert solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-left: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-left example</h2>
    <div> This is a simple example for the border-left property.</div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS border-left Eigenschaft

Beispiel der border-left Eigenschaft auf verschiedene Elemente angewendet:

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

<!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>A heading with a solid green left border</h1>
    <p>A heading with a dotted blue left border.</p>
    <div>A div element with a thick double left border.</div>
  </body>
</html>
Probier es selbst »

In diesem nächsten Beispiel wird mit dem <div>-Element eine Box erstellt, auf die eine background-color gesetzt wird, sowie ein ridge-Linksrahmen. Beachte, dass die Stile ridge, groove, inset und outset ihre 3D-Schattierung aus der Rahmenfarbe ableiten und daher vor einem kontrastierenden Hintergrund am besten aussehen.

Beispiel der border-left Eigenschaft mit dem <div> Element:

Beispiel der CSS border-left Eigenschaft mit dem Wert ridge

<!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>This box has a ridge border on the left side.</p>
    </div>
  </body>
</html>
Probier es selbst »

Hinweis zur logischen Eigenschaft

border-left ist eine physische Eigenschaft – sie zielt immer auf die linke Kante, unabhängig von der Schreibrichtung des Textes. Wenn der Rahmen dem Textanfang folgen soll (linke Kante bei links-nach-rechts-Sprachen, rechte Kante bei rechts-nach-links-Sprachen), verwende stattdessen die logische Eigenschaft border-inline-start. Bei den meisten links-nach-rechts-Englisch-Layouts verhalten sich beide gleich, aber logische Eigenschaften passen ein Layout automatisch an, wenn sich die Richtung ändert.

Werte

Die border-left-Kurzschreibweise akzeptiert die Werte ihrer drei Langform-Eigenschaften sowie die CSS-weiten Schlüsselwörter:

WertBeschreibung
border-left-widthLegt die Breite des linken Rahmens eines Elements fest. Der Standardwert ist "medium". Erforderlicher Wert.
border-left-styleLegt den Linienstil des linken Rahmens eines Elements fest. Der Standardwert ist "none". Erforderlicher Wert.
border-left-colorLegt die Farbe des linken Rahmens eines Elements fest. Der Standardwert ist die aktuelle Textfarbe.
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom übergeordneten Element.

Übung

Übung
Was bewirkt die border-left Eigenschaft in CSS?
Was bewirkt die border-left Eigenschaft in CSS?
Was this page helpful?