Uno degli aspetti più interessanti di CSS3, e sicuramente uno dei primi ad essere implementati dagli sviluppatori, è la possibilità di creare elementi con bordi arrotondati mediante la proprietà border-radius. Prima di CSS3, per creare box con i bordi arrotondati si dovevano utilizzare delle immagini da posizionare ai quattro angoli dell’elemento da riquadrare. Era poi necessario un gioco di div annidati per disporre queste immagini in modo corretto...
La proprietà border-radius permette di specificare il raggio da applicare agli angoli del box cui è applicato per creare l’effetto arrotondato.
<div style="border: 2px solid;border-radius: 15px;" >TEXT</div>
TEXT
Naturalemente è possibile specificare raggi diversi per i 4 angoli dell'elemento
<div style="border: 2px solid;border-radius: 5px 15px 10px 20px;" >TEXT</div>
TEXT