PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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;

06-div-border (2K)
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).
13-CSS-properties (3K)
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 ;

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>
...
06-div-border-top-bottom (7K)

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 ;

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>
...
07-div-border-4 (7K)







Link sponsorizzati