border-left

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-left Kurznotation CSS Eigenschaft setzt alle Eigenschaften des linken Rands eines Elements.

Probieren Sie es aus

Wie bei allen Kurznotationseigenschaften setzt border-left immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht angegeben sind. Es setzt diejenigen, die nicht angegeben sind, auf ihre Standardwerte. Betrachten Sie den folgenden Code:

css
border-left-style: dotted;
border-left: thick green;

Er entspricht tatsächlich diesem hier:

css
border-left-style: dotted;
border-left: none thick green;

Der Wert von border-left-style, der vor border-left angegeben wurde, wird ignoriert. Da der Standardwert von border-left-style none ist, führt das Nicht-Spezifizieren des border-style-Teils zu keinem Rahmen.

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

/* Global values */
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;

Die drei Werte der Kurznotationseigenschaft können in beliebiger Reihenfolge angegeben werden, wobei einer oder zwei weggelassen werden können.

Werte

<br-width>

Siehe border-left-width.

<br-style>

Siehe border-left-style.

<color>

Siehe border-left-color.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

border-left = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Anwenden eines linken Rands

HTML

html
<div>This box has a border on the left side.</div>

CSS

css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Ergebnisse

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch