CSS Border Sides
Bordo CSS - Singoli lati
Dagli esempi delle pagine precedenti, hai visto che è possibile specificare un bordo diverso per ogni lato.
In CSS, ci sono anche proprietà per specificare ciascuno dei bordi (in alto, a destra, in basso e a sinistra):
Esempio
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Risultato:
Different Border Styles
L'esempio sopra dà lo stesso risultato di questo:
Esempio
p {
border-style: dotted solid;
}
Quindi, ecco come funziona:
Se la border-styleproprietà ha quattro valori:
- stile bordo: punteggiato pieno doppio tratteggiato;
- il bordo superiore è punteggiato
- il bordo destro è solido
- il bordo inferiore è doppio
- il bordo sinistro è tratteggiato
Se la border-styleproprietà ha tre valori:
- stile bordo: doppio pieno punteggiato;
- il bordo superiore è punteggiato
- i bordi destro e sinistro sono solidi
- il bordo inferiore è doppio
Se la border-styleproprietà ha due valori:
- stile bordo: solido punteggiato;
- i bordi superiore e inferiore sono tratteggiati
- i bordi destro e sinistro sono solidi
Se la border-styleproprietà ha un valore:
- stile bordo: punteggiato;
- tutti e quattro i bordi sono tratteggiati
Esempio
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
La border-styleproprietà è utilizzata nell'esempio sopra. Tuttavia, funziona anche con
border-width
e border-color.