border-left-width

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-width CSS Eigenschaft legt die Breite des linken Rands eines Elements fest.

Probieren Sie es aus

border-left-width: thick; 
border-left-width: 2em; 
border-left-width: 4px; 
border-left-width: 2ex; 
border-left-width: 0; 
<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> 
#example-element { background-color: palegreen; color: #000; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px; }

Syntax

css
/* Keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* Global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: revert; border-left-width: revert-layer; border-left-width: unset;

Werte

<line-width>

Definiert die Breite des Rands entweder als explizite nicht-negative <length> oder als ein Schlüsselwort. Wenn es sich um ein Schlüsselwort handelt, muss es einer der folgenden Werte sein:

  • thin
  • medium
  • thick

Hinweis: Da die Spezifikation die genaue Dicke, die durch jedes Schlüsselwort angegeben wird, nicht definiert, ist das genaue Ergebnis bei deren Verwendung implementationsspezifisch. Sie folgen jedoch immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines Dokuments konstant.

Formale Definition

Anfangswertmedium
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertdie absolute Länge; 0 falls border-left-style none oder hidden ist
AnimationstypLängenangabe

Formale Syntax

border-left-width = 
 <line-width> 

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

Beispiele

Vergleich von Randbreiten

HTML

html
<div>Element 1</div> <div>Element 2</div>

CSS

css
div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; }

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

Browser-Kompatibilität

Siehe auch