Bordi arrotondati utilizzando le immagini

In questo articolo vedremo come arrotondare i nostri box con delle immagini.
Prima di tutto vi invito a leggere l’articolo = Come creare delle immagini aventi angoli arrotondati

Supponendo che abbiamo già le due immagini con i bordi arrotondati, possiamo applicare il tutto nelle nostre pagine web.

Inseriamo all’interno dei tag body il seguente codice:

Qui dentro scriviamo tutto il contenuto che ci interessa.
SenzaWeb.it = Che mondo sarebbe senza il web!

Mentre nel CSS inseriamo:

.bottom {
   background-color: white;
   background-image: url("/images/angolo2.gif") ;
   background-repeat: no-repeat;
   background-position: bottom left;
   text-align: center;
   width: 300px;
}
 
.post {
   background-image: url("/images/angolo1.gif") ;
   background-repeat: no-repeat;
   padding-top: 20px;
   padding-bottom: 20px;
}

#content {
    background: #a5c7ee;
    color: #000;
}

Il risultato finale sarà:

Vediamo cosa possiamo modificare nel CSS…

.bottom {
   background-color: white;
   background-image: url("/images/angolo2.gif") ;
   background-repeat: no-repeat;
   background-position: bottom left;
   text-align: center;
   width: 300px;
}

Il background d’immagine è

Possiamo modificare la larghezza del div, cambiando la cifra di width: 300px.

.post {
   background-image: url("/images/angolo1.gif") ;
   background-repeat: no-repeat;
   padding-top: 20px;
   padding-bottom: 20px;
}

Mentre il background image del class=post è

Il padding applicato al top ed al bottom serve a tenere larghi i bordi e quindi farli vedere.

#content {
    background: #a5c7ee;
    color: #000;
}

Mentre nel div id=content abbiamo un background e sarebbe l’azzurrino che vedete nell’esempio.
Il color invece è il colore del testo.