Proprietà CSS border-left-width

La proprietà CSS border-left-width definisce la larghezza (spessore) del bordo sinistro di un elemento. È la controparte per il lato singolo di border-width, e consente di controllare solo il bordo sinistro senza modificare i bordi superiore, destro o inferiore.

La larghezza del bordo sinistro — come quella di tutti gli altri lati — può essere impostata anche con le proprietà abbreviate border o border-width. Usa border-left-width quando devi applicare uno stile solo al bordo sinistro, un pattern comune per barre laterali, blockquote e strisce "callout" lungo il lato di un elemento.

Perché il bordo deve esistere prima

Una larghezza del bordo non ha alcun effetto visivo da sola. Il browser visualizza un bordo solo quando è impostato un border-style (lo stile predefinito è none), quindi una dichiarazione come border-left-width: thick; non produce nulla finché non si definisce anche uno stile. Impostalo con border-left-style oppure con la proprietà abbreviata border-style:

/* width alone — nothing renders, because the style is still `none` */
.box {
  border-left-width: thick;
}

/* correct — a style is present, so the 5px left border is painted */
.box {
  border-left-style: solid;
  border-left-width: 5px;
  border-left-color: teal;
}

Lo stesso vale per il colore: se si omette border-left-color, il bordo utilizza il currentColor dell'elemento (ovvero il colore del testo).

Informazione

La specifica non definisce lo spessore esatto di ciascuna parola chiave. Tuttavia, seguono sempre questo ordine: thin ≤ medium ≤ thick.

Informazione

La specifica non definisce come si connettono negli angoli i bordi con larghezze e stili diversi.

Valore iniziale	medium
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	Sì. La larghezza del bordo è animabile.
Versione	CSS1
Sintassi DOM	object.style.borderLeftWidth = "4px";

Sintassi

Sintassi della proprietà CSS border-left-width

border-left-width: medium | thin | thick | length | initial | inherit;

Esempio della proprietà border-left-width con il valore "thick":

Esempio della proprietà CSS border-left-width con il valore thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
        border-style: dashed;
        border-left-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-width example</h2>
    <p>As you can see the width of the left border is set to thick.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà border-left-width con tutti i valori:

Esempio della proprietà CSS border-left-width con i valori medium, thin, thick, px, initial e inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-width example classes */
      .b1 {
        border-left-width: medium;
      }
      .b2 {
        border-left-width: thin;
      }
      .b3 {
        border-left-width: thick;
      }
      .b4 {
        border-left-width: 10px;
      }
      .b5 {
        border-left-width: initial;
      }
      .b6 {
        border-left-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Provalo tu stesso »

Risultato

![Proprietà CSS border-left-width](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)

Valori

Valore	Descrizione	Prova
medium	Definisce un bordo sinistro medio. È il valore predefinito di questa proprietà.	Prova »
thin	Definisce un bordo sinistro sottile. Spetta all'agente utente determinare la larghezza esatta.	Prova »
thick	Definisce un bordo sinistro spesso. Spetta all'agente utente determinare la larghezza esatta.	Prova »
length	Definisce la lunghezza dello spessore del bordo sinistro. Ad esempio, 10px, 5em, 8pt, ecc.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Informazione

Le percentuali non sono consentite per le larghezze dei bordi — border-left-width: 50% non è valido e la dichiarazione viene ignorata. Usa una lunghezza fissa (px, em, rem) oppure una delle parole chiave.

Cose da tenere a mente

È richiesto uno stile. Larghezza e colore rimangono inerti finché border-style non viene impostato su un valore diverso da none.
Lo spessore delle parole chiave è definito dal browser. thin, medium e thick non hanno valori in pixel fissi nella specifica; garantiscono solo l'ordine thin ≤ medium ≤ thick. Per design pixel-perfect, usa una lunghezza esplicita.
Influisce sul layout. La larghezza del bordo viene aggiunta alla dimensione renderizzata dell'elemento, a meno che box-sizing non sia impostato su border-box, nel qual caso il bordo viene disegnato all'interno della larghezza dichiarata.
Animabile. Il valore può essere utilizzato con transizioni e animazioni, il che rende border-left-width utile per effetti di striscia al passaggio del mouse.

Proprietà correlate

border-left-style e border-left-color — gli altri due componenti del bordo sinistro.
border-left — la proprietà abbreviata per larghezza, stile e colore del lato sinistro in un'unica dichiarazione.
border-right-width, border-top-width, border-bottom-width — lo stesso controllo per gli altri lati.

Esercitati

Pratica

Quali dei seguenti valori possono essere usati con la proprietà border-left-width in CSS?