Proprietà CSS border-bottom
CSS border-bottom imposta larghezza, stile e colore del bordo inferiore di un elemento in una dichiarazione. Sintassi, valori ed esempi.
La proprietà border-bottom è una proprietà abbreviata CSS che definisce la larghezza, lo stile e il colore del bordo inferiore di un elemento in una singola dichiarazione. Invece di scrivere tre proprietà separate, le imposti tutte in una volta:
/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;
/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;Questa pagina tratta la sintassi, i valori accettati, esempi pratici e il problema più comune (uno stile mancante) affinché il bordo venga effettivamente visualizzato.
Come si comportano i valori
Puoi elencare i tre valori in qualsiasi ordine, ma l'ordine consigliato è larghezza, stile, colore. Qualsiasi valore omesso torna al suo valore predefinito:
- Larghezza omessa → predefinita su
medium(circa 3px nella maggior parte dei browser). - Colore omesso → predefinito su
currentColor, ovvero il colore del testo dell'elemento. - Stile omesso → predefinito su
none, il che significa che il bordo non viene renderizzato affatto.
Quest'ultimo punto è il motivo principale per cui border-bottom "non funziona": senza un border-style, il browser non disegna nulla indipendentemente dalla larghezza o dal colore impostati.
/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }
/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }Quando usare border-bottom
Usa border-bottom quando vuoi una linea su un solo lato di un elemento invece di un riquadro completo. Casi comuni:
- Intestazioni sottolineate o divisori di sezione — una riga più spessa e colorata sotto un
<h2>. - Indicatori di scheda/navigazione — evidenziare il link attivo con un bordo inferiore.
- Campi di input — lo stile "Material Design" utilizza solo un bordo inferiore invece di un riquadro completo.
Se hai bisogno dello stesso bordo su tutti e quattro i lati, usa invece la proprietà abbreviata border. Per gli altri lati individuali, consulta border-top, border-left e border-right.
| Valore iniziale | medium none currentColor |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | No. |
| Animabile | Sì. Il colore e la larghezza di border-bottom sono animabili. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderBottom = "15px dotted blue"; |
Sintassi
Sintassi della proprietà CSS border-bottom
border-bottom: border-width | border-style | border-color | initial | inherit;Esempio della proprietà border-bottom:
Esempio della proprietà CSS border-bottom con il valore groove
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Risultato
Esempio di utilizzo della proprietà border-bottom con gli elementi <h2>, <p> e <div>:
Esempio della proprietà CSS border-bottom con i valori dashed, double e ridge
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Risultato
Valori
| Valore | Descrizione |
|---|---|
| border-bottom-style | Definisce lo stile del bordo inferiore. Il valore predefinito è "none". |
| border-bottom-width | Definisce la larghezza del bordo inferiore. Il valore predefinito è "medium". |
| border-bottom-color | Definisce il colore del bordo inferiore. Il valore predefinito è il colore del testo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dal suo elemento padre. |
Proprietà correlate
border— la proprietà abbreviata per tutti i lati.border-top,border-left,border-right— le altre proprietà abbreviate per lato singolo.border-bottom-width,border-bottom-style,border-bottom-color— le tre proprietà longhand in cui si espandeborder-bottom.border-style,border-width,border-color— controllano tutti e quattro i lati contemporaneamente per aspetto.