Proprietà CSS border-left
La proprietà shorthand CSS border-left imposta larghezza, stile e colore del bordo sinistro in una sola dichiarazione, con esempi e valori.
La proprietà CSS border-left imposta la larghezza, lo stile della linea e il colore del bordo sinistro di un elemento in una singola dichiarazione.
È una shorthand per queste tre proprietà longhand:
- border-left-width — lo spessore del bordo (es.
2px,thin,medium,thick). - border-left-style — lo stile della linea (es.
solid,dotted,dashed,double,ridge). - border-left-color — il colore della linea.
Perché usare border-left
Usa border-left quando vuoi un bordo solo sul lato sinistro di un elemento anziché su tutti e quattro i lati. È un pattern comune per blockquote, barre laterali, indicatori di navigazione e riquadri "callout", dove una singola linea accentuata contrassegna il lato sinistro di un blocco. Essendo una shorthand, è più breve rispetto alla scrittura separata delle tre proprietà longhand, e reimposta anche al valore predefinito qualsiasi valore omesso.
Come funzionano i valori
I tre valori possono essere scritti in qualsiasi ordine e uno o due di essi possono essere omessi:
- Se ometti il colore, il bordo usa la proprietà color dell'elemento — cioè lo stesso colore del suo testo (la parola chiave CSS globale
currentColor). - Se ometti la larghezza, il valore predefinito è
medium(circa 3–4px, a seconda del browser). - Se ometti lo stile, il valore predefinito è
none, il che significa nessun bordo viene disegnato — quindi una dichiarazione comeborder-left: 5px blue;non mostra nulla. Lo stile è il valore che quasi sempre è necessario includere.
| Valore iniziale | medium none currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | Sì. Il colore e la larghezza del bordo sono animabili. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderLeft = "1px solid black"; |
Sintassi
Sintassi di border-left
border-left: border-width border-style border-color | initial | inherit;Esempio della proprietà border-left:
Esempio della proprietà CSS border-left con valore solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Risultato
Esempio della proprietà border-left applicata a diversi elementi:
Esempio della proprietà CSS border-left con valori dotted, double e solid
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>In questo esempio successivo, viene creato un riquadro con l'elemento <div>, con un background-color impostato sul riquadro e un bordo sinistro ridge. Si noti che gli stili ridge, groove, inset e outset derivano la loro ombreggiatura 3D dal colore del bordo, quindi appaiono meglio su uno sfondo contrastante.
Esempio della proprietà border-left con l'elemento <div>:
Esempio della proprietà CSS border-left con valore ridge
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Nota sulla proprietà logica
border-left è una proprietà fisica — punta sempre al bordo sinistro indipendentemente dalla direzione di scrittura del testo. Se vuoi che il bordo segua l'inizio del testo (il bordo sinistro nelle lingue da sinistra a destra, il bordo destro nelle lingue da destra a sinistra), usa invece la proprietà logica border-inline-start. Per la maggior parte dei layout in inglese da sinistra a destra le due si comportano allo stesso modo, ma le proprietà logiche fanno adattare automaticamente il layout quando cambia la direzione.
Valori
La shorthand border-left accetta i valori delle sue tre proprietà longhand, più le parole chiave CSS globali:
| Valore | Descrizione |
|---|---|
| border-left-width | Imposta la larghezza del bordo sinistro di un elemento. Il valore predefinito è "medium". Valore obbligatorio. |
| border-left-style | Imposta lo stile della linea del bordo sinistro di un elemento. Il valore predefinito è "none". Valore obbligatorio. |
| border-left-color | Imposta il colore del bordo sinistro di un elemento. Il valore predefinito è il colore corrente del testo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dal suo elemento genitore. |