Bordi arrotondati con il CSS

Per ottenere uno smussamento dei bordi possiamo utilizzare il CSS (Cascading Style Sheet).

Vantaggi e svantaggi
Il vantaggio è che i bordi arrotondati dovrebbero essere visualizzati in tutti i browser e quindi anche nei maggiori browser quali Firefox e Internet Explorer.
Invece lo svantaggio è quello di avere degli angoli non perfettamente arrotondati, l’impatto sicuramente sarà quello di vedere degli angoli arrotondati, ma guardando attentamente noteremo il difetto, questo perchè lo smussamento avviene attraverso una serie di pixel.

Innanzitutto dobbiamo inserire il seguente codice all’interno delle nostre pagine web, e precisamente all’interno dei tag body:

<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="testo">Qui dentro scriveremo il contenuto</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>

Adesso andiamo a modificare il CSS, inserendo quindi:

b.rtop, b.rbottom {
display: block;
background: #fff;
}
b.rtop b, b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #FF0000;
}
b.r1 {
margin: 0 5px;
}
b.r2 {
margin: 0 3px;
}
b.r3 {
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}
.testo {
background: #FF0000;
color:#fff;
font-size:18px;
text-align: center;
}

Ecco il risultato:

Il colore dei bordi e del background del tag

<div class="testo">Qui il contenuto</div>

dovranno essere uguali.
1. Quindi, nel CSS, possiamo modificare il colore di sfondo uguale alla pagina:

b.rtop, b.rbottom {
display: block;
background: #fff;
}

Qui il background è di colore bianco (#fff), questo non è altro che il colore di sfondo che dovrà essere uguale al colore della pagina.
2. Modifichiamo il background dei bordi:

b.rtop b, b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #FF0000;
}

Il colore di sfondo rosso (#FF0000) è il colore del bordo, il quale dovrà essere uguale al colore di sfondo del box e quindi del contenuto (vedi punto 3).
3. Modifichiamo il colore del testo ed il background di tutto il box e quindi dove scriveremo il contenuto:

.testo {
background: #FF0000;
color:#fff;
font-size:18px;
text-align: center;
}

Il background rosso (#FF0000) è il colore di sfondo del contenuto e dell’intero box, e dovrà essere uguale al background dei bordi (vedi punto 2).
Mentre il colore del testo (color: #fff) in questo caso è nero.