Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

i bordi nel box model

13 luglio 2011, Scritto da , category css

Anche per i bordi valgono gli stessi discorsi fatti su margin e padding. Si utilizzano allo stesso modo in cui si utilizzavano per le tabelle html con la particolarità di poter specificare bordi diversi per ognuno dei quattro lati del box model.

Anche le proprietà dei bordi non sono ereditabili e la sintassi è simile a quella di margin e padding, ovvero:

border-top
border-right
border-bottom
bprder-left

con in più la specifica del tipo di bordo ed il colore.
In particolare, il bordo ha tre caratteristiche:

  • colore: rgb, come visto nella pagina dei colori
  • stile: none (nessuno) | dotted (punteggiato) | dashed (lineette) | solid (solido) | double (doppio)
  • spessore: px | thin | medium …

La scrittura completa, dunque, risulta:

div {
border-top: 2px solid red;
border-right: 0px;
border-bottom: 2px solid red;
border-left: 0px;
}
/*la scrittura abbreviata, nel caso in cui tutti i bordi siano uguali, diventa */
div {border: 2px solid red;