Proprietà CSS border-top-width
La proprietà border-top-width definisce la larghezza del bordo superiore di un elemento. Scopri tutti i valori con esempi illustrati.
La proprietà CSS border-top-width definisce la larghezza (spessore) del bordo superiore di un elemento. Controlla solo il lato in alto, quindi è utile quando si vuole un bordo superiore più spesso o più sottile rispetto agli altri tre lati — ad esempio, una linea di accento spessa sopra una card o una sezione.
È possibile impostare la larghezza del bordo superiore in due modi:
- Direttamente, con la proprietà longhand
border-top-width, quando solo il lato superiore è diverso. - Come parte di una shorthand, usando border o border-width, quando si vogliono impostare più lati contemporaneamente.
border-top-width produce un effetto visibile solo dopo aver impostato uno stile di bordo. Per impostazione predefinita lo stile del bordo è none, il che significa che un bordo di qualsiasi larghezza non viene visualizzato. Occorre quindi dichiarare prima uno stile con border-style o border-top-style, e tale stile non deve essere none o hidden.
/* Without a style the width is ignored — nothing shows */
.box {
border-top-width: thick; /* has no effect on its own */
}
/* Add a style and the width becomes visible */
.box {
border-top-style: solid;
border-top-width: thick;
}Le proprietà longhand correlate border-right-width, border-bottom-width e border-left-width funzionano allo stesso modo per gli altri lati.
La specifica non definisce lo spessore esatto di ogni keyword. Tuttavia, rispettano sempre il seguente ordine: thin ≤ medium ≤ thick.
La specifica non definisce come si collegano nei angoli i bordi con stili e larghezze diversi.
| Valore iniziale | medium |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | Sì. La larghezza del bordo è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderTopWidth = "5px"; |
Sintassi
Sintassi della proprietà CSS border-top-width
border-top-width: medium | thin | thick | length | initial | inherit;Esempio della proprietà border-top-width:
Esempio della proprietà CSS border-top-width con valore thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
border-style: dotted;
border-top-width: thick;
}
</style>
</head>
<body>
<h2>Border-top-width example</h2>
<p>As you can see the width of the top border is set to thick.</p>
</body>
</html>Risultato
![Proprietà CSS border-top-width](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)
Esempio della proprietà border-top-width con tutti i valori:
Esempio della proprietà CSS border-top-width con i valori medium, thin, thick, initial e inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
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;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-width example classes */
.b1 {
border-top-width: medium;
}
.b2 {
border-top-width: thin;
}
.b3 {
border-top-width: thick;
}
.b4 {
border-top-width: 10px;
}
.b5 {
border-top-width: initial;
}
.b6 {
border-top-width: inherit;
}
</style>
</head>
<body>
<h1>Border-top-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Valori
| Valore | Descrizioni | Provalo |
|---|---|---|
| medium | Definisce un bordo superiore medio. È il valore predefinito di questa proprietà. | Provalo » |
| thin | Definisce un bordo superiore sottile. Spetta allo user agent determinare la larghezza esatta. | Provalo » |
| thick | Definisce un bordo superiore spesso. Spetta allo user agent determinare la larghezza esatta. | Provalo » |
| length | Definisce lo spessore del bordo superiore (es. 10px, 5em, 8pt). I valori percentuali non sono supportati. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Keyword vs. valori di lunghezza
È possibile esprimere la larghezza con una delle tre keyword (thin, medium, thick) oppure con una lunghezza esplicita. Le keyword sono comode ma vaghe: la specifica CSS non fissa una dimensione in pixel precisa per esse, ma solo l'ordine thin ≤ medium ≤ thick. La maggior parte dei browser le interpreta come circa 1px, 3px e 5px, ma non è consigliabile farvi affidamento.
Usare una lunghezza esplicita (1px, 0.25em, 3pt) ogni volta che si ha bisogno di uno spessore prevedibile e uniforme tra i browser. Si noti che le percentuali non sono consentite per le larghezze dei bordi, e le lunghezze negative non sono valide.
Aspetti da tenere a mente
- Nessun bordo visibile senza uno stile. L'errore più comune è impostare solo la larghezza e dimenticare
border-top-style. Con lo stile predefinitonone, il bordo semplicemente non viene visualizzato. initialvs.inherit.initialreimposta la larghezza al suo valore predefinito specificato (medium), mentreinheritcopia la larghezza calcolata dall'elemento genitore.- La larghezza influisce sul layout. Un bordo più largo si aggiunge alla dimensione resa dell'elemento, a meno che box-sizing non sia impostato su
border-box, il quale mantiene fissa la larghezza/altezza dichiarata e assorbe il bordo al suo interno. - Angoli. La specifica non definisce come si uniscono nei angoli i bordi di larghezze o stili diversi, quindi un bordo superiore spesso che incontra un bordo laterale sottile potrebbe apparire leggermente diverso tra i browser.