CREARE SITI WEB in HTML e CSS > Personalizzare i bordi su ogni lato
Come gią visto in una delle precedenti lezioni,
per creare bordi devi dichiarare la proprietą border:
border: 5px solid green;
In questo modo tutti quattro i lati avranno lo stesso bordo.
Puoi differenziare lo stile dei bordi per ogni singolo lato tramite le seguenti proprietą:
"border-top" per il lato superiore
"border-right" per il lato destro
"border-bottom" per il lato inferiore
"border-left" per il lato sinistro
Ti ricordo, che tutte le proprietą le puoi inserire comodamente dal programma HTML Kit,
dalla scheda "Style" cliccando sul terzo comando "CSS Properties" (ovvero, sulla freccettina posta a fianco).
Ad esempio puoi decidere di assegnare solo il bordo superiore e inferiore e con differenti caratteristiche :
border-top: 5px solid green ;
border-bottom: 10px double blue ;
border-bottom: 10px double blue ;
| codice HTML | risultato pagina web |
|
... <style type="text/css"> div { background-color: red; height: 50px; width: 100px; border-top: 5px solid green ; border-bottom: 10px double blue ; } </style> </head> <body> <div>Zona numero uno</div> ... |
|
Oppure, puoi assegnare un bordo punteggiato (dotted) per il lato superiore e sinistro;
e uno a linea continua (solid) per quello inferiore e destro:
border-top: 5px dotted gray ;
border-left: 5px dotted gray;
border-bottom: 10px solid black ;
border-right: 10px solid black ;
border-left: 5px dotted gray;
border-bottom: 10px solid black ;
border-right: 10px solid black ;
| codice HTML | risultato pagina web |
|
... <style type="text/css"> div { background-color: yellow; height: 50px; width: 75%; border-top: 5px dotted gray ; border-left: 5px dotted gray; border-bottom: 5px solid black ; border-right: 5px solid black ; } </style> ... |
|