Proprietà CSS border
La proprietà CSS border è una shorthand che imposta i valori per tutti e quattro i lati di un elemento. Trova esempi e provaci subito.
La proprietà CSS border è una shorthand che imposta border-width, border-style e border-color per tutti e quattro i lati di un elemento in una singola dichiarazione. I valori di larghezza negativi non sono consentiti.
Questa pagina tratta la sintassi shorthand, i valori accettati, come assegnare un aspetto diverso a ciascun lato e le proprietà correlate a cui ricorrere quando la shorthand non è sufficiente.
Usa la shorthand border quando vuoi lo stesso bordo su tutti e quattro i lati:
/* shorthand — all four sides identical */
border: 2px solid #1c87c9;
/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;Quando i lati devono essere diversi, imposta le proprietà longhand singolarmente — ciascuna accetta fino a quattro valori nell'ordine superiore–destra–inferiore–sinistra. Puoi anche mirare a un singolo lato con border-top, border-right, border-bottom e border-left.
Il valore di border-style è ciò che rende visibile un bordo. Se imposti solo una larghezza e un colore ma lasci lo stile al suo valore predefinito none, il bordo rimane invisibile.
| Valore iniziale | medium none currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Larghezza, colore e stile del bordo sono animabili. |
| Versione | CSS1 |
| Sintassi DOM | object.style.border = "5px solid green"; |
Sintassi
Sintassi della proprietà CSS border
border: border-width border-style border-color | initial | inherit;Esempio della proprietà border:
Esempio della proprietà CSS border con il valore solid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>Risultato
Guarda un altro esempio in cui lo stile del bordo è tratteggiato, la larghezza è impostata a 3px e il colore del bordo è blu.
Esempio della proprietà border con il valore "dashed":
Esempio della proprietà CSS border con il valore dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>La shorthand border dipinge sempre tutti e quattro i lati allo stesso modo. Per variare un lato, sovrascrivi una delle proprietà longhand dopo di essa. Nell'esempio seguente una singola dichiarazione border-color accetta tre valori: il primo si applica al lato superiore, il secondo al lato destro e sinistro, e il terzo al lato inferiore. Il primo viene applicato al bordo superiore, il secondo a quello destro e sinistro, e il terzo a quello inferiore.
Esempio della proprietà border con 3 valori border-color:
Esempio della proprietà CSS border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>Esempio della proprietà border-style:
Esempio della proprietà CSS border con i valori solid, dotted e double
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>Angoli arrotondati e proprietà correlate
La shorthand border non controlla il raggio degli angoli. Per arrotondare gli angoli, aggiungi la proprietà separata border-radius:
p {
border: 3px solid #1c87c9;
border-radius: 8px;
}Vale la pena conoscere alcune proprietà correlate:
- border-radius — arrotonda gli angoli.
- outline — disegna una linea esterna al bordo che non occupa spazio nel layout.
- border-collapse — unisce i bordi adiacenti delle celle nelle tabelle in una singola linea.
Valori
La shorthand accetta le tre proprietà longhand di border in qualsiasi ordine, più le parole chiave globali.
| Valore | Descrizione |
|---|---|
| border-width | Definisce la larghezza del bordo. Il valore predefinito è "medium". |
| border-style | Definisce lo stile del bordo. Il valore predefinito è "none". |
| border-color | Definisce il colore del bordo. Il valore predefinito è il colore corrente dell'elemento. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |