Alcuni giorni fa abbiamo introdotto l’uso dei bordi nei fogli di stile CSS. Come abbiamo visto in quella occasione le proprietà relativa ai bordi riguardano stile (style), colore (color) e spessore (width). In questa guida analizzeremo più in dettaglio le proprietà dei CSS del tipo border-style che intervengono sullo stile (tipologia) del bordo.
La proprietà border-style
Quando vogliamo definire un bordo comune su tutti e quattro lati di un elemento possimo impiegare una proprietà sintetica; nel nostro caso utilizzeremo la proprietà border-style nella forma.
h1 {
border-style: solid;
}
In questo esempio la proprietà border-style di CSS è applicata all’elemento h1 di HTML ed assume il valore “solid” che corrisponde ad un bordo costruito con una linea continua. La proprietà border-style può assumere una decina di valori differenti a seconda dell’effetto da realizzare:
- none: nessun bordo (valore predefinito);
- hidden: bordo nascosto;
- dotted: bordo con linea punteggiata;
- dashed: bordo con linea tratteggiata;
- solid: bordo con linea continua;
- double: bordo con doppia linea continua;
- groove: bordo con effetto scavato;
- ridge: bordo con effetto in rilievo;
- inset: bordo tridimensionale incavato sul fondo;
- outset: bordo tridimensionale in rilievo sul fondo;
Bordi fifferenti
Come abbiamo già visto, con i CSS è anche possibile definire bordi differenti per i quattro lati di un elemento. Utilizzeremo a questo scopo le proprietà estese del tipo border-lato-style dove lato indica uno dei quattro lati del bordo: top (alto), bottom (basso), right (destra) e left (sinistra). Un codice di esempio potrebbe quindi avere una forma di questo tipo:
h1 {
border-top-style: solid;
border-bottom-style: double;
border-right-style: dotted;
border-left-style: dashed;
}
