Bordi arrotondati con i CSS

Ciao a tutti, oggi parleremo dell’utilizzo delle immagini di sfondo per creare i “famosi” bordi arrotondati. Come si fanno ?

Ci sono più di una tecnica per riuscire a disegnare i “Rounded corner”, si può dividire la”cella” in tre parti cioé top,center, bottom , ma così siamo obbligati a usare delle celle di larghezza fissa, allora come facciamo ?

Ecco la soluzione, usiamo tutti e quattro gli angoli, così da poter avere la cella di qualsiasi dimensione che vogliamo.

Codice HTML:

Bordi arrotondati

Voila ecco i bordi arrotondati grazie a 4 immagini, top-left/right, bottom-left/right

Codice Css:

.rbroundbox { background:#50cfd4 repeat; }

.rbtop div  { background: url(tl.gif) no-repeat top left; }
.rbtop      { background: url(tr.gif) no-repeat top right; }

.rbbot div  { background: url(bl.gif) no-repeat bottom left; }
.rbbot      { background: url(br.gif) no-repeat bottom right; }

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
max-width:200px;
height: 14px;
font-size: 1px;
}
.rbcontent  {margin: auto;max-width:200px;}
.rbroundbox { margin: auto;max-width:200px;}