I bordi degli elementi in CSS sono molto utilizzati all'interno delle pagine web, in quanto permettono di definire visivamente i confini di un elemento.
Questo elemento ha un bordo a sinistra.
Questo è un elemento con bordi arrotondati.
In questo caso, i bordi sono soltanto sopra e sotto.
In questa lezione, vediamo come funzionano le proprietà CSS border-width, border-color, border-style e border-radius.
I bordi possono essere di diverso tipo: ad esempio, formati da una linea continua, tratteggiata, doppia, ecc. Un po' come funzionava per le sottolineature dei testi che abbiamo già visto.
Per scegliere lo stile del bordo di un elemento, usiamo la proprietà CSS border-style.
Questa proprietà accetta i seguenti valori:
solid, definisce un bordo formato da una linea continua.dashed, definisce un bordo composto da trattini.dotted, definisce un bordo composto da punti.double, definisce un bordo composto da due linee solide parallele con uno spazio tra di loro.groove, definisce un bordo che appare come una linea incavata, creando un effetto di profondità. L'effetto dipende dal colore del bordo.ridge, definisce un bordo che appare come una linea in rilievo, creando un effetto di elevazione. L'effetto dipende dal colore del bordo.inset, definisce un bordo che fa apparire l'elemento come se fosse incassato nella pagina.outset, definisce un bordo che fa apparire l'elemento come se fosse sollevato dalla pagina.none, con cui non viene visualizzato alcun bordo.hidden, definisce un bordo simile a none, ma nascosto (invisibile) e non nullo.Vediamo come usarli:
.none { border-style: none; }
.hidden { border-style: hidden; }
.solid { border-style: solid; }
.dashed { border-style: dashed; }
.dotted { border-style: dotted; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
.inset { border-style: inset; }
.outset { border-style: outset; }Nell'esempio, abbiamo inserito ogni tipologia di bordo in una classe specifica.
È possibile specificare un "misto" di stili per il bordo di un elemento. Ad esempio, possiamo scegliere un bordo continuo per la base, uno tratteggiato a destra, ecc.
Per farlo, usiamo la sintassi border-style: alto destra basso sinistra.
Ad esempio, vogliamo scegliere un bordo tratteggiato in alto, doppio a destra, linea fissa in basso e puntinato a sinistra. Ecco come possiamo fare:
<p>Ciao a tutti! Ho bordi misti</p>
<style>
p {
border-style: dashed double solid dotted;
}
</style>Per specificare lo spessore dei bordi, è possibile utilizzare la proprietà CSS border-width. Accetta qualsiasi unità di misura, come px, cm, em. Tuttavia, puoi utilizzare anche:
thin, che rappresenta un bordo sottile. Generalmente equivalente a 1 pixel, ma può variare leggermente a seconda del browser.medium, che rappresenta un bordo di larghezza media. Generalmente equivalente a 3-4 pixel.thick, che rappresenta un bordo spesso. Generalmente equivalente a 5-6 pixel.Con border-width, rimane obbligatorio utilizzare anche border-style.
Vediamo degli esempi:
<p class="p1">Questo elemento ha un bordo con spessore 5px</p>
<p class="p2">Questo elemento ha un bordo con spessore piccolo</p>
<style>
.p1 {
border-style: solid;
border-width: 5px;
}
.p2 {
border-style: dashed;
border-width: thin;
}
</style>Possiamo scegliere spessori diversi per lo stesso elemento. La sintassi rimane la stessa di border-style:
border-width: alto destra basso sinistra.
Puoi anche accorciare in border-width: alto-basso destra-sinistra scrivendo soltanto due numeri.
.p1{
border-style: solid;
border-width: 2px 5px; /* 2px in basso e alto, 5px a destra e sinistra */
}
.p2 {
border-style: dotted;
border-width: 5px 10px 3px 9px; /* 5px in alto, 10px a destra, 3px in basso, 9px a sinistra */
}
.p3 {
border-style: solid;
border-width: 0 0 0 5px; /* 5px soltanto a sinistra */
}Possiamo impostare il colore del bordo (o di ogni singolo lato) attraverso border-color. Questa proprietà accetta i seguenti valori:
transparent, che imposta il bordo trasparente (invisibile).Vediamo un esempio:
<p>I bordi sono di colore rosso</p>
<style>
p {
border-style: solid;
border-color: red;
}
</style>Possiamo scegliere colori diversi per i lati del bordo. La sintassi rimane sempre la stessa di quelle che abbiamo già visto:
border-color: alto destra basso sinistra.
<p>I bordi sono di colore rosso, verde, arancio e blu</p>
<style>
p {
border-style: solid;
/* Rosso in alto, verde a destra, arancio in basso e blu a sinistra */
border-color: red green orange blue;
}
</style>Possiamo utilizzare la proprietà border per raggruppare tutti gli attributi dei bordi che abbiamo visto finora.
La sintassi è border: spessore stile colore, dove:
border-width.border-style.border-color.Vediamo un esempio:
<p>I bordi sono racchiusi nella proprietà border</p>
<style>
p {
border: 3px solid orange;
}
</style>È anche possibile specificare il bordo lato per lato, con:
border-top, per il bordo in alto.border-bottom, per il bordo in basso.border-left, per il bordo a sinistra.border-right, per il bordo a destra.<p>Questo testo ha soltanto il bordo a sinistra</p>
<style>
p {
border-left: 3px solid orange;
}
</style>Con CSS, è anche possibile arrotondare i bordi. A questo scopo, esiste la proprietà border-radius, che però non viene raggruppata come valore in border, ma è a parte.
La proprietà border-radius accetta qualsiasi valore numerico + unità di misura.
<p>Questo elemento ha i bordi arrotondati</p>
<style>
p {
background-color: lightgrey;
min-height: 50px;
text-align: center;
border-radius: 10px;
}
</style>Nell'esempio, abbiamo allineato il testo al centro con text-align e scelto il colore di sfondo.