Bordi

Abbiamo raccolto in questa pagina una serie di esempi sull'uso dei bordi. Per comodità didattica la proprietà è stata applicata ad un elemento div, semplice box contenitore.

Senza bordi

Un div senza bordi.

Codice:

#div1 {
background: Silver;
width: 300px;
}


Uso delle proprietà singole

A questo div abbiamo applicato un bordo inferiore usando le proprietà singole.

Codice:

#div2 {
background: Silver;
border-bottom-color: Black;
border-bottom-width: 2px;
border-bottom-style: solid;
width: 300px;
}


Uso della proprietà abbreviata border-bottom

In questo caso la proprietà abbreviata border-bottom: stesso risultato con una sola dichiarazione.

Codice:

#div3 {
background: Silver;
border-bottom: 2px solid black;
width: 300px;
}


Uso della proprietà singole per i quattro lati

 

Codice:

#div5 {
background: Silver;
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;
width: 300px;
}


Uso della proprietà abbreviata border

Se usiamo la proprietà abbreviata border il bordo viene applicato a tutti e quattro i lati del box.

Codice:

#div4 {
background: Silver;
border : 2px solid Black;
width: 300px;
}