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;
Questo articolo è stato letto 17 volte! Se ti è piaciuto, spargi la voce!
Giacomo Rutili
Consulente informatico, sviluppo siti web in ambiente LAMP e personalizzando cms quali WordPress, Joomla! e Drupal. Mi occupo anche di Web Marketing, SEO (Ottimizzazione per i motori di ricerca), SEM (Marketing sui motori di ricerca), SMM (Marketing sui Social media) e tengo corsi di formazione professionale. Mi trovi anche su Google+ Giacomo Rutili+
Follow Me:
