Proprietà per i bordi
|
Valori |
|
|
border-width |
|
|
collapse |
|
|
color |
|
|
<lunghezze> |
|
|
none |
|
|
border-top-width |
|
|
border-color |
|
|
border-style |
|
|
thin |
|
|
thin |
|
|
border-bottom-width |
|
|
border-color |
|
|
border-style |
|
|
thin |
|
|
border-left-width |
|
|
border-color |
|
|
border-style |
|
|
thin |
|
|
border-right-width |
|
|
border-color |
|
|
border-style |
|
|
thin |
Esempi dimostrativi delle funzionalità di alcune proprietà per i bordi:
· Esempio: proprietà per i bordi
La
proprietà border viene
utilizzata per definire il bordo di ogni singolo lato.
La proprietà border può
definire sinteticamente con una sola dichiarazione il colore (border-color), la
larghezza (border-width) e lo
stile (border-style).
div{
border: 1em dotted #ccc;
}
In questo esempio il tag <div> avrà tutti e quattro i bordi costituiti da una linea punteggiata (dotted) di colore grigio (#ccc) spessa 1em.
La
proprietà border-collapse è
utilizzata per eliminare lo spazio tra i bordi delle diverse celle e tra le
celle e il bordo della tabella.
La proprietà border-collapse ammette
2 valori:
· separate (le celle sono separate);
· collapse (le celle sono adiacenti e i bordi collassano).
table{
border-collapse: collapse;
}
td{
border: 1em dotted #ccc;
}
La proprietà border-color è utilizzata per impostare il colore di ogni singolo lato.
div{
border-color: #ccc;
}
In questo esempio il tag <div> avrà tutti e 4 i bordi costituiti da una linea continua di colore grigio (#ccc).
La proprietà border-spacing è utilizzata per impostare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella. Tale spazio può essere impostato tramite misure di lunghezza.
table{
border-spacing: 0.25em 0.5em;
}
In questo esempio lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella è pari a 0.25em 0.5em.
La
proprietà border-style definisce
lo stile di ogni singolo lato.
La proprietà border-style può
assumere i seguenti valori:
· none (non definisce nessun bordo);
· hidden (usato
con le tabelle, ha lo stesso effetto di none).
Questo valore non è supportato da Internet Explorer;
· dotted (definisce una linea punteggiata);
· dashed (definisce una linea tratteggiata);
· solid (definisce una linea continua singola);
· double (definisce una doppia linea continua);
· groove (definisce il bordo scavato);
· ridge (definisce il bordo sbalzato).
· inset (definisce
il bordo incastonato).
L'effetto grafico equivale a un pulsante premuto;
· outset (definisce
l'effetto opposto a inset).
L'effetto grafico equivale a un pulsante non ancora premuto.
div{
border-style: dotted;
}
In questo esempio al tag <div> viene applicato un bordo con una linea punteggiata.
La
proprietà border-top viene
utilizzata per definire il bordo superiore di un elemento.
La proprietà border-top può
definire sinteticamente con una sola dichiarazione il colore (border-color), la
larghezza (border-width) e lo
stile (border-style).
div{
border-top: 1px solid black;
}
In questo esempio al tag <div> viene applicato un bordo superiore di colore nero (black) con linea continua (solid) di spessore 1px.
La proprietà border-top-color viene utilizzata per definire il colore del bordo superiore di un elemento.
div{
border-top-color: #ccc;
}
In questo esempio al tag <div> viene applicato un bordo superiore di colore grigio (#ccc).
La proprietà border-top-style viene utilizzata per definire lo stile del bordo superiore di un elemento.
div{
border-top-style: dotted;
}
In questo esempio al tag <div> viene applicato un bordo superiore con una linea punteggiata.
La
proprietà border-top-width viene
utilizzata per impostare la larghezza o spessore del bordo superiore di un
elemento.
La proprietà border-top-width può
assumere i seguenti valori:
· thin (definisce una linea sottile);
· medium (definisce
una linea media).
Questo è il valore predefinito;
· thick (definisce una linea più intensa);
· <lunghezze> (l'intensità della linea è stabilita in px,em,cm, etc.).
div{
border-top-width: thin;
}
In questo esempio al tag <div> viene applicato un bordo superiore con una linea sottile.
La
proprietà border-width viene
utilizzata per definire la larghezza o spessore di ogni singolo lato.
La proprietà border-width può
assumere i seguenti valori:
· thin (definisce una linea sottile);
· medium (definisce
una linea media).
Questo è il valore predefinito;
· thick (definisce una linea più intensa);
· <lunghezze> (l'intensità della linea è stabilita in px,em,cm, etc.).
div
border-width: 3px thin 1em 3px;
}
In questo esempio al tag <div> viene applicato:
· un bordo superiore con spessore 3px;
· un bordo destro con spessore sottile (thin);
· un bordo inferiore con spessore di 1em;
· un bordo sinistro con spessore 3px;
La
proprietà border-bottom viene
utilizzata per definire il bordo inferiore di un elemento.
La proprietà border-bottom può
definire sinteticamente con una sola dichiarazione il colore (border-color), la
larghezza (border-width) e lo
stile (border-style).
div{
border-bottom: 1px dashed black;
}
In questo esempio al tag <div> viene applicato un bordo inferiore di colore nero (black) con linea tratteggiata (dashed) di spessore 1px.
La proprietà border-bottom-color viene utilizzata per definire il colore del bordo inferiore di un elemento.
div{
border-bottom-color: green;
}
In questo esempio al tag <div> viene applicato un bordo inferiore di colore verde (green).
La proprietà border-bottom-style viene utilizzata per definire lo stile del bordo inferiore di un elemento.
div{
border-bottom-style: dashed;
}
In questo esempio al tag <div> viene applicato un bordo inferiore con una linea tratteggiata.
La
proprietà border-bottom-width viene
utilizzata per impostare la larghezza o spessore del bordo inferiore di un
elemento.
La proprietà border-bottom-width può
assumere i seguenti valori:
· thin (definisce una linea sottile);
· medium (definisce
una linea media).
Questo è il valore predefinito;
· thick (definisce una linea più intensa);
· <lunghezze> (l'intensità della linea è stabilita in px,em,cm, etc.).
div{
border-bottom-width: 2px;
}
In questo esempio al tag <div> viene applicato un bordo inferiore di spessore2px.
La
proprietà border-left viene
utilizzata per definire il bordo sinistro di un elemento.
La proprietà border-left può
definire sinteticamente con una sola dichiarazione il colore (border-color), la
larghezza (border-width) e lo
stile (border-style).
div{
border-left: 2px dotted red;
}
In questo esempio al tag <div> viene applicato un bordo sinistro di colore rosso (red) con linea punteggiata (dotted) di spessore 2px.
La proprietà border-left-color viene utilizzata per definire il colore del bordo sinistro di un elemento.
div{
border-left-color: blue;
}
In questo esempio al tag <div> viene applicato un bordo sinistro di colore blu (blue).
La proprietà border-left-style viene utilizzata per definire lo stile del bordo sinistro di un elemento.
div{
border-left-style: solid;
}
In questo esempio al tag <div> viene applicato un bordo sinistro con linea continua singola.
La
proprietà border-left-width viene
utilizzata per impostare la larghezza o spessore del bordo sinistro di un
elemento.
La proprietà border-left-width può
assumere i seguenti valori:
· thin (definisce una linea sottile);
· medium (definisce
una linea media).
Questo è il valore predefinito;
· thick (definisce una linea più intensa);
· <lunghezze> (l'intensità della linea è stabilita in px,em,cm, etc.).
div{
border-left-width: 1em;
}
In questo esempio al tag <div> viene applicato un bordo sinistro di spessore1em.
La
proprietà border-right viene
utilizzata per definire il bordo destro di un elemento.
La proprietà border-right può
definire sinteticamente con una sola dichiarazione il colore (border-color), la
larghezza (border-width) e lo stile
(border-style).
div{
border-right: 2px dashed black;
}
In questo esempio al tag <div> viene applicato un bordo destro di colore nero (black) con linea tratteggiata (dashed) di spessore 2px.
La proprietà border-right-color viene utilizzata per definire il colore del bordo destro di un elemento.
div{
border-right-color: red;
}
In questo esempio al tag <div> viene applicato un bordo destro di colore rosso (red).
La proprietà border-right-style viene utilizzata per definire lo stile del bordo destro di un elemento.
div{
border-right-style: solid;
}
In questo esempio al tag <div> viene applicato un bordo destro con linea continua singola.
La
proprietà border-right-width viene
utilizzata per impostare la larghezza o spessore del bordo destro di un
elemento.
La proprietà border-right-width può
assumere i seguenti valori:
· thin (definisce una linea sottile);
· medium (definisce
una linea media).
Questo è il valore predefinito;
· thick (definisce una linea più intensa);
· <lunghezze> (l'intensità della linea è stabilita in px,em,cm, etc.).
div{
border-right-width: 2px;
}
In questo esempio al tag <div> viene applicato un bordo destro di spessore2px.