Bordi in CSS
Stile del Bordo in CSS
La proprietĂ border-style
specifica quale tipo di bordo mostrare.
I seguenti valori sono ammessi:
- dotted: Definisce un bordo tratteggiato
- dashed: Definisce un bordo a tiretto
- solid: Definisce un bordo solido
- double: Definisce un bordo doppio
- groove: Definisce un bordo incavato in 3D.
- ridge: Definisce un bordo in rilievo in 3D.
- inset: Definisce un bordo in rilievo in 3D.
- outset: Definisce un bordo sporgente in 3D.
- none: Definisce nessun bordo
- hidden: Definisce un bordo nascosto
La proprietà border-style può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).
Larghezza del Bordo in CSS
La proprietĂ border-width specifica la larghezza dei quattro bordi.
La larghezza può essere impostata come dimensione specifica (in px, pt, cm, em, ecc.) o utilizzando uno dei tre valori predefiniti: thin (sottile), medium (medio) o thick (spesso):
/* Esempio di diverse larghezze di bordo */p.uno { border-style: solid; border-width: 5px;}
p.due { border-style: solid; border-width: medium;}
p.tre { border-style: dotted; border-width: 2px;}
p.quattro { border-style: dotted; border-width: thick;}
Larghezze Specifiche per i Lati
La proprietà border-width può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro):
/* Esempio di larghezze specifiche per i lati */p.uno { border-style: solid; border-width: 5px 20px; /* 5px per il bordo superiore e inferiore, 20px sui lati */}
p.due { border-style: solid; border-width: 20px 5px; /* 20px per il bordo superiore e inferiore, 5px sui lati */}
p.tre { border-style: solid; border-width: 25px 10px 4px 35px; /* 25px per il bordo superiore, 10px per il bordo destro, 4px per il bordo inferiore e 35px per il bordo sinistro */}
Colore del Bordo in CSS
La proprietĂ border-color viene utilizzata per impostare il colore dei quattro bordi.
Il colore può essere impostato tramite:
- nome: specifica un nome di colore, come “red”
- HEX: specifica un valore HEX, come “#ff0000”
- RGB: specifica un valore RGB, come “rgb(255,0,0)“
- HSL: specifica un valore HSL, come “hsl(0, 100%, 50%)“
- transparent (trasparente)
Se border-color non è impostato, eredita il colore dell’elemento.
/* Esempio di diversi colori di bordo */p.uno { border-style: solid; border-color: red;}
p.due { border-style: solid; border-color: green;}
p.tre { border-style: dotted; border-color: blue;}
Colori Specifici per i Lati del Bordo
La proprietà border-color può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).
/* Esempio di colori specifici per i lati del bordo */p.uno { border-style: solid; border-color: red green blue yellow; /* rosso per il bordo superiore, verde per il bordo destro, blu per il bordo inferiore, giallo per il bordo sinistro */}
Bordo CSS Scorciatoia
Come hai visto nella pagina precedente, ci sono molte proprietĂ da considerare quando si tratta di bordi.
Per abbreviare il codice, è anche possibile specificare tutte le proprietà di bordo individuali in una sola proprietà .
La proprietà border è una proprietà abbreviata per le seguenti proprietà di bordo individuali:
- border-width
- border-style
- border-color
/* Esempio di proprietĂ di bordo abbreviata */p { border: 5px solid red;}
Bordi Arrotondati in CSS
La proprietĂ border-radius viene utilizzata per aggiungere bordi arrotondati a un elemento.
/* Esempio di bordi arrotondati */p { border: 2px solid red; border-radius: 5px;}