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:
border-left-style: dotted;
border-left: thick green;
Er entspricht tatsächlich diesem hier:
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
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
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beispiele
Anwenden eines linken Rands
HTML
<div>This box has a border on the left side.</div>
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