Proprietà CSS border-width
CSS border-width è una proprietà shorthand per impostare lo spessore dei quattro lati del bordo di un elemento. Esempi e prove pratiche.
La proprietà CSS border-width imposta la larghezza (spessore) del bordo di un elemento. È una shorthand che si applica a tutti e quattro i lati contemporaneamente ed è la componente di larghezza della shorthand più ampia border.
È possibile impostare ogni lato in modo indipendente con le proprietà longhand:
- border-top-width definisce la larghezza del bordo superiore.
- border-right-width definisce la larghezza del bordo destro.
- border-bottom-width definisce la larghezza del bordo inferiore.
- border-left-width definisce la larghezza del bordo sinistro.
Un bordo viene disegnato solo quando border-style è diverso dal valore predefinito none. Se si imposta border-width senza uno stile di bordo, il bordo rimane invisibile — questa è la ragione più comune per cui un bordo "non funziona."
Come la shorthand assegna i valori ai lati
border-width accetta da uno a quattro valori, e il numero di valori forniti determina a quali lati vengono applicati:
| Valori forniti | Alto | Destra | Basso | Sinistra |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
La forma a quattro valori segue l'ordine in senso orario alto → destra → basso → sinistra usato da ogni shorthand di box in CSS (lo stesso ordine di margin e padding).
Ogni valore è un <line-width>: una lunghezza (px, em, rem, ecc.) oppure una delle parole chiave thin, medium o thick. Le percentuali non sono consentite.
| Valore iniziale | medium |
|---|---|
| Ereditato | No |
| Animabile | Sì. La larghezza del bordo è animabile. |
| Versione | CSS1 |
| Sintassi JavaScript | object.style.borderWidth = "1px 5px"; |
Sintassi
border-width: <line-width>{1,4} | initial | inherit;Un singolo valore (tutti e quattro i lati)
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Larghezza diversa per ogni lato
Qui vengono confrontate tutte e tre le dimensioni tramite parola chiave affiancate, più un box a quattro valori in cui ogni lato ha uno spessore diverso.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Risultato
Parola chiave vs. lunghezza: quando usare quale
- Usa una lunghezza (
px,em,rem) quando hai bisogno di uno spessore esatto e prevedibile — questo è il caso più comune nei layout reali. - Usa le parole chiave
thin,mediumethickquando il numero esatto di pixel non è rilevante e sei disposto a lasciare che sia il browser a decidere. Corrispondono a valori in pixel piccoli definiti dal browser (approssimativamente 1px, 3px e 5px nella maggior parte dei browser, ma la specifica non li fissa). mediumè il valore iniziale, quindi un elemento conborder-style: solide nessunborder-widthmostra già un bordo di larghezza media.
I valori negativi non sono validi e fanno sì che l'intera dichiarazione venga ignorata.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| medium | Definisce un bordo medio. Questo è il valore predefinito. (Parola chiave relativa con valori in pixel definiti dal browser.) | Prova » |
| thin | Definisce un bordo sottile. | Prova » |
| thick | Definisce un bordo spesso. | Prova » |
| length | Definisce lo spessore del bordo. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |