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.
Un div senza bordi.
Codice:
#div1 {
background: Silver;
width: 300px;
}
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;
}
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;
}
Codice:
#div5 {
background: Silver;
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red;
width: 300px;
}
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;
}