Proprietà CSS border-bottom-width
Usa la proprietà border-bottom-width per definire lo spessore del bordo inferiore di un elemento. Scopri come utilizzare i valori di questa proprietà CSS.
La proprietà border-bottom-width imposta la larghezza (spessore) del bordo inferiore di un elemento. Controlla solo il lato inferiore — per applicare uno stile a tutti e quattro i lati contemporaneamente, usa invece la shorthand border-width.
Questa pagina illustra i valori accettati da border-bottom-width, perché è necessario uno stile di bordo affinché sia visibile, la differenza tra le parole chiave thin/medium/thick e le lunghezze esplicite, e come si relaziona con le altre proprietà di larghezza per singolo lato.
Perché la larghezza spesso non mostra nulla
Per vedere l'effetto di border-bottom-width, devi impostare anche uno stile di bordo con la proprietà border-style o border-bottom-style. Lo stile di bordo iniziale è none, e un bordo con stile none non viene mai renderizzato indipendentemente da quanto sia largo — quindi la larghezza da sola non produce alcun effetto visibile.
/* Invisible: no style set */
.box { border-bottom-width: 10px; }
/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }Valori accettati
Puoi impostare la larghezza in due modi:
- Lunghezza — qualsiasi lunghezza CSS come
4px,0.25emo0.1rem. Questa è l'opzione più prevedibile perché il risultato è esattamente quello specificato. Le lunghezze negative non sono consentite e vengono trattate come non valide. - Parole chiave —
thin,mediumothick. La specifica non definisce uno spessore in pixel esatto per ciascuna parola chiave; il risultato preciso dipende dall'implementazione. Le parole chiave seguono sempre il patternthin≤medium≤thick, e una determinata parola chiave rimane costante all'interno di un singolo documento. Nella maggior parte dei browser corrispondono approssimativamente a1px,3pxe5px.
Se hai bisogno che la larghezza sia coerente tra i browser, preferisci una lunghezza esplicita rispetto alle parole chiave.
| Valore iniziale | medium |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. La larghezza può essere animata. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderBottomWidth = "5px"; |
Sintassi
Sintassi della proprietà CSS border-bottom-width
border-bottom-width: medium | thin | thick | length | initial | inherit;Esempio della proprietà border-bottom-width:
Esempio della proprietà CSS border-bottom-width con il valore thick
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Risultato
Esempio della proprietà border-bottom-width con il valore "medium":
Esempio della proprietà CSS border-bottom-width con il valore medium
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Esempio della proprietà border-bottom-width che mostra la differenza tra i valori "thin" e "thick":
Esempio della proprietà CSS border-bottom-width con il valore thin
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| medium | Imposta un bordo inferiore medio. È il valore predefinito. | Prova » |
| thin | Imposta un bordo inferiore sottile. | Prova » |
| thick | Imposta un bordo inferiore spesso. | Prova » |
| length | Imposta la larghezza del bordo inferiore a un valore di lunghezza specifico. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita il valore della proprietà dall'elemento padre. |
Proprietà correlate
border-bottom-width è una delle quattro proprietà di larghezza per singolo lato. Usa quella corrispondente per ciascun lato, oppure la shorthand quando vuoi impostarne più d'uno alla volta:
- border-top-width, border-right-width, border-left-width — gli altri tre lati singoli.
- border-width — shorthand che imposta tutte e quattro le larghezze in una sola dichiarazione.
- border-bottom-style e border-bottom-color — lo stile e il colore dello stesso lato inferiore.
- border-bottom — shorthand per larghezza, stile e colore del lato inferiore insieme.