Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per i bordi


Proprietà CSS2

Proprietà per i bordi

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione dei bordi.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
border border-width
border-style
border-color
4.0 4.0 1.0
border-collapse collapse
separate
4.0 6.0 1.0
border-color color 4.0 6.0 1.0
border-spacing <lunghezze> no 6.0 1.0
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4.0 6.0 1.0
border-top
border-top-width
border-style
border-color
4.0 6.0 1.0
border-top-color border-color 4.0 6.0 1.0
border-top-style border-style
4.0 6.0 1.0
border-top-width thin
medium
thick
<lunghezze>
4.0 4.0 1.0
border-width thin
medium
thick
<lunghezze>
4.0 4.0 1.0
border-bottom border-bottom-width
border-style
border-color
4.0 6.0 1.0
border-bottom-color border-color 4.0 6.0 1.0
border-bottom-style border-style 4.0 6.0 1.0
border-bottom-width thin
medium
thick
<lunghezze>
4.0 4.0 1.0
border-left border-left-width
border-style
border-color
4.0 6.0 1.0
border-left-color border-color 4.0 6.0 1.0
border-left-style border-style 4.0 6.0 1.0
border-left-width thin
medium
thick
<lunghezze>
4.0 4.0 1.0
border-right border-right-width
border-style
border-color
4.0 6.0 1.0
border-right-color border-color 4.0 6.0 1.0
border-right-style border-style 4.0 6.0 1.0
border-right-width thin
medium
thick
<lunghezze>
4.0 4.0 1.0

Esempi dimostrativi delle funzionalità di alcune proprietà per i bordi:

torna alla lista completa delle proprietà

border

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.

torna alla tabella

border-collapse

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; 
}

torna alla tabella

border-color

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).

torna alla tabella

border-spacing

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-spacing al momento non è supportata da Internet Explorer 6 e precedenti per Windows.

torna alla tabella

border-style

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.

torna alla tabella

border-top

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.

torna alla tabella

border-top-color

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).

torna alla tabella

border-top-style

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.

torna alla tabella

border-top-width

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.

torna alla tabella

border-width

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;

torna alla tabella

border-bottom

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.

torna alla tabella

border-bottom-color

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).

torna alla tabella

border-bottom-style

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.

torna alla tabella

border-bottom-width

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 spessore 2px.

torna alla tabella

border-left

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.

torna alla tabella

border-left-color

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).

torna alla tabella

border-left-style

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.

torna alla tabella

border-left-width

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 spessore 1em.

torna alla tabella

border-right

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.

torna alla tabella

border-right-color

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).

torna alla tabella

border-right-style

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.

torna alla tabella

border-right-width

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 spessore 2px.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]