Proprietà CSS border-left-style

La proprietà CSS border-left-style imposta lo stile del bordo sinistro di un elemento. Accetta una singola parola chiave scelta dallo stesso insieme di valori disponibili per la proprietà abbreviata border-style. A differenza di border-style, che imposta lo stile per tutti e quattro i lati contemporaneamente, border-left-style riguarda solo il bordo sinistro.

Questa proprietà si abbina a border-left-width e border-left-color, oppure è possibile impostare tutti e tre contemporaneamente con la proprietà abbreviata border-left. Un bordo è visibile solo quando il suo stile è impostato su un valore diverso dal predefinito none — anche una larghezza generosa e un colore marcato non producono nulla finché non viene applicato uno stile.

La larghezza predefinita del bordo sinistro è medium. Puoi modificarla con la proprietà border-left-width o border-width.

Non tutti i browser rendono lo stesso stile in modo identico. Chrome, ad esempio, disegna i punti di un bordo dotted come piccoli quadrati anziché cerchi, e i valori 3D (groove, ridge, inset, outset) dipendono dal colore del bordo per produrre il loro effetto luce-ombra.

Informazione

La specifica non definisce la quantità di spazio tra i punti e i trattini.

Informazione

La specifica non definisce come i bordi con stili diversi si congiungono negli angoli.

Valore iniziale	none
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No
Animabile	No
Versione	CSS1
Sintassi DOM	object.style.borderLeftStyle = "solid";

Sintassi

Sintassi della proprietà CSS border-left-style

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Esempio della proprietà border-left-style:

Esempio della proprietà CSS border-left-style con i valori solid e dotted

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-left-style: solid;
      }
      div {
        border-left-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with solid border-left-style.</p>
    <div>Example with dotted border-left-style.</div>
  </body>
</html>

Provalo tu stesso »

Informazione

A seconda del valore di border-color, gli effetti dei valori groove, ridge, inset e outset possono variare.

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

Esempio della proprietà CSS border-left-style con i valori hidden, dotted, dashed, solid, double, groove, ridge, inset e outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        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;
        background-color: #8ebf42;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-left-style example classes */
      .b1 {
        border-left-style: hidden;
      }
      .b2 {
        border-left-style: dotted;
      }
      .b3 {
        border-left-style: dashed;
      }
      .b4 {
        border-left-style: solid;
      }
      .b5 {
        border-left-style: double;
      }
      .b6 {
        border-left-style: groove;
      }
      .b7 {
        border-left-style: ridge;
      }
      .b8 {
        border-left-style: inset;
      }
      .b9 {
        border-left-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-left-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Provalo tu stesso »

Risultato

Valori

Valore	Descrizione	Provalo
none	Definisce che non ci sarà alcun bordo. Valore predefinito.
hidden	Uguale a `none`, tranne che nella risoluzione dei conflitti di bordo per gli elementi di tabella, dove rimuove completamente il bordo sinistro dalla resa.
dotted	Definisce un bordo punteggiato.
dashed	Definisce un bordo tratteggiato.
double	Definisce un bordo doppio.
solid	Definisce un bordo continuo.
groove	Definisce un bordo scanalato 3D. Il suo effetto può variare con il valore di border-color.
ridge	Definisce un bordo a cresta 3D. Il suo effetto può variare con il valore di border-color.
inset	Definisce un bordo incassato 3D. Il suo effetto può variare con il valore di border-color.
outset	Definisce un bordo in rilievo 3D. Il suo effetto può variare con il valore di border-color.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Quando utilizzarla

Usa border-left-style quando vuoi un accento stilizzato solo sul bordo sinistro — un pattern comune per citazioni in blocco, card di avviso ed elementi attivi nella barra laterale, dove una singola barra colorata contrassegna l'elemento senza racchiuderlo. Per lo stesso effetto sugli altri lati, usa border-top-style, border-right-style o border-bottom-style. Quando tutti e quattro i bordi condividono uno stesso stile, la proprietà abbreviata border-style è più concisa.

Esercitati

Pratica

Quali valori può assumere la proprietà 'border-left-style' in CSS?