> 
- Home Page
- > Manuale CSS
- > Proprietà CSS Border
Le proprietà del bordo consentono di specificare come viene visualizzato il bordo degli elementi delle nostre pagine.
Proprietà CSS Border
CSS Borders
Le proprietà del bordo consentono di specificare lo stile, il colore e la larghezza di un elemento.
Proprietà
| Proprieta | Descrizione | Valori | Esempi |
|---|---|---|---|
| border | Per impostare tutte le proprietà | border-width border-style border-color |
¤ border ¤ |
| border-width | La larghezza di tutti i lati del bordo | thin medium thick length |
¤ border-width ¤ |
| border-style | Lo stile di tutti i lati del bordo | none hidden dotted dashed solid double groove ridge inset outset |
¤ border-style ¤ |
| border-color | Imposta il colore del bordo per tutti i lati | color | ¤ border-color ¤ |
| border-top | Per impostare tutte le proprietà del bordo in alto | border-top-width border-style border-color |
¤ border-top ¤ |
| border-top-width | Larghezza del bordo in alto | thin medium thick length |
¤ border-top-width ¤ |
| border-top-style | Stile del bordo in alto | border-style | ¤ border-top-style ¤ |
| border-top-color | Colore del bordo in alto | border-color | ¤ border-top-color ¤ |
| border-right | Per impostare tutte le proprietà del bordo destro | border-right-width border-style border-color |
¤ border-right ¤ |
| border-right-width | Larghezza del bordo a destra | thin medium thick length |
¤ border-right-width ¤ |
| border-right-style | Stile del bordo a destra | border-style | ¤ border-right-style ¤ |
| border-right-color | Colore del bordo a destra | border-color | ¤ border-right-color ¤ |
| border-bottom | Per impostare tutte le proprietà del bordo in basso | border-bottom-width border-style border-color |
¤ border-bottom ¤ |
| border-bottom-width | Larghezza del bordo in basso | thin medium thick length |
¤ border-bottom-width ¤ |
| border-bottom-style | Stile del bordo in basso border-style | border-style | ¤ border-bottom-style. ¤ |
| border-bottom-color | Colore del bordo in basso | border-color | ¤ border-bottom-color ¤ |
| border-left | Per impostare tutte le proprietà del bordo sinistro | border-left-width border-style border-color |
¤ border-left ¤ |
| border-left-width | Larghezza del bordo a sinistra | thin medium thick length |
¤ border-left-width ¤ |
| border-left-style | Stile del bordo a sinistra | border-style | ¤ border-left-style ¤ |
| border-left-color | Colore del bordo a sinistra | border-color | ¤ border-left-color ¤ |
border
Per impostare tutte le proprietà in una sola dichiarazione.
Valori possibili sono:
- border-width (lo spessore del bordo)
- border-style (lo stile del bordo)
- border-color (il colore del bordo)
.ConBordo {
border: medium #000000 dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-width
Permette di impostare tutti e quattro i valori di spessore per il bordo.
Valori possibili sono:
- thin (Bordo sottile )
- medium (Bordo medio)
- thick (Bordo a strati spesso)
- lunghezza (Definisce lo spessore del bordo)
.UnaImpostazione {
border-width: 1px;
}
.DueImpostazioni {
border-width: 1px 0px;
}
.QuattroImpostazioni {
border-width: 1px 2px 1px 2px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-style
Imposta tutti stili per tutti e quattro i bordi.
Valori possibili sono:
- none (Nessun bordo)
- hidden (Bordo nascosto)
- dotted (Bordo puntato)
- dashed (Bordo tratteggiato)
- solid (Bordo solido)
- double (Definisce due bordi)
- groove
- ridge
- inset (Bordo 3d inset)
- outset (Bordo 3d outset)
.TuttiTrattini {
border-style: dashed;
}
.PuntiSolido {
border-style: dotted solid;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-color
Imposta il colore del bordo. Possiamo inserire da uno a quattro colori.
Valori possibili sono:
- un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)
.BordiRossi {
border-color: red;
}
.BordiRossoBlu {
border-color: blue red;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-top
Abbreviazione per impostare tutte le proprietà del bordo in alto in una dichiarazione.
Valori possibili sono:
- border-top-width (lo spessore del bordo)
- border-top-style (lo stile del bordo)
- border-top-color (il colore del bordo)
Esempio
.ConBordoAlto {
border-top: medium #000000 dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-top-color
Il colore del bordo in alto.
Valori possibili sono:
- un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)
.BordoAltoColorato {
border-top-color: #ff0000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-top-style
Lo stile del bordo in alto.
Valori possibili sono:
- none (Nessun bordo)
- hidden (Bordo nascosto)
- dotted (Bordo puntato)
- dashed (Bordo tratteggiato)
- solid (Bordo solido)
- double (Definisce due bordi)
- groove
- ridge
- inset (Bordo 3d inset)
- outset (Bordo 3d outset)
.BordoAltoPuntato {
border-top-style: dotted;
}
. BordoAltoTrattini {
border-top-style: dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-top-width
Imposta lo spessore del bordo in alto.
Valori possibili sono:
- thin (Bordo sottile )
- medium (Bordo medio)
- thick (Bordo a strati spesso)
- lunghezza (Definisce lo spessore del bordo)
.BordoAltoLargo {
border-top-width: 6px;
}
.BordoAltoStretto {
border-top-width: 1px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-right
Per impostare tutte le proprietà del bordo destro in una sola dichiarazione.
Valori possibili sono:
- border-right-width (lo spessore del bordo)
- border-right-style (lo stile del bordo)
- border-right-color (il colore del bordo)
.ConBordoDestra {
border-right: medium #000000 dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-right-color
Imposta il colore del bordo a destra.
Valori possibili sono:
- un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)
.BordoDestroColorato {
border-right-color: #ff0000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-right-style
Lo stile del bordo a destra.
Valori possibili sono:
- none (Nessun bordo)
- hidden (Bordo nascosto)
- dotted (Bordo puntato)
- dashed (Bordo tratteggiato)
- solid (Bordo solido)
- double (Definisce due bordi)
- groove
- ridge
- inset (Bordo 3d inset)
- outset (Bordo 3d outset)
.BordoDestroPuntato {
border-right-style: dotted;
}
. BordoDestroTrattini {
border-right-style: dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-right-width
Imposta lo spessore del bordo destro.
Valori possibili sono:
- thin (Bordo sottile )
- medium (Bordo medio)
- thick (Bordo a strati spesso)
- lunghezza (Definisce lo spessore del bordo)
.BordoDestroLargo {
border-right-width: 6px;
}
.BordoDestroStretto {
border-right-width: 1px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-bottom
Per impostare tutte le proprietà del bordo in basso in una sola dichiarazione.
Valori possibili sono:
- border-bottom-width (lo spessore del bordo)
- border-bottom-style (lo stile del bordo)
- border-bottom-color (il colore del bordo)
.ConBordoSotto {
border-bottom: medium #000000 dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
border-bottom-color
Imposta il colore del bordo in basso.
Valori possibili sono:
- un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)
.BordoSottoColorato {
border-bottom-color: #ff0000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-bottom-style
Lo stile del bordo in basso.
Valori possibili sono:
- none (Nessun bordo)
- hidden (Bordo nascosto)
- dotted (Bordo puntato)
- dashed (Bordo tratteggiato)
- solid (Bordo solido)
- double (Definisce due bordi)
- groove
- ridge
- inset (Bordo 3d inset)
- outset (Bordo 3d outset)
Esempio
.BordoSottoPuntato {
border-bottom-style: dotted;
}
.
BordoSottoTrattini {
border-bottom-style: dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-bottom-width
Imposta lo spessore del bordo in basso di un elemento HTML
Valori possibili sono:
- thin (Bordo sottile)
- medium (Bordo medio)
- thick (Bordo a strati spesso)
- un valore (Definisce lo spessore del bordo )
Esempio
.BordoSottoLargo {
border-bottom-width: 6px;
}
.BordoSottoStretto {
border-bottom-width: 1px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-left
Abbreviazione per impostare tutte le proprietà del bordo sinistro in una dichiarazione.
Valori possibili sono:
- border-left-width (lo spessore del bordo)
- border-left-style (lo stile del bordo)
- border-left-color (il colore del bordo)
.ConBordoSinistro {
border-left: medium #000000 dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-left-color
Il colore del bordo sinistro.
Valori possibili sono:
- un colore (il colore del bordo, può essere un nome, un valore rgb o esadecimale)
Esempio
.BordoSinistroColorato {
border-left-color: #ff0000;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-left-style
Lo stile del bordo a sinistra.
Valori possibili sono:
- none (Nessun bordo)
- hidden (Bordo nascosto)
- dotted (Bordo puntato)
- dashed (Bordo tratteggiato)
- solid (Bordo solido)
- double (Definisce due bordi)
- groove
- ridge
- inset (Bordo 3d inset)
- outset (Bordo 3d outset)
.BordoSinistroPuntato {
border-left-style: dotted;
}
. BordoSinistroTrattini {
border-left-style: dashed;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ border-left-width
Imposta lo spessore del bordo sinistro.
Valori possibili sono:
- thin (Bordo sottile )
- medium (Bordo medio)
- thick (Bordo a strati spesso)
- lunghezza (Definisce lo spessore del bordo)
.BordoSinistroLargo {
border-left-width: 6px;
}
.BordoSinistroStretto {
border-left-width: 1px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
