Il CSS 3 ha introdotto la proprietà border-radius che serve a definire la rotondità dei bordi per i riquadri.
L’elemento arrotondato, anche leggero, in generale aggiunge un tocco di professionalità alle vostre pagine web, facendole sembrare meno un foglio di Excel 
Vediamo una semplice struttura che incorpora la proprietà border-radius:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div {
/* assegnamo la proprietà al tag div */
padding: 20px;
background-color:#b0c4de;
border-radius: 20px;
}
</style>
</head>
<body>
<!-- Inseriamo un Dummy Text nel div -->
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
La proprietà può essere definita nei seguenti modi:
– border-radius: 50px;
Con un sole valore tutti gli angoli saranno smussato con un raggio di 50 pixel.
– border-radius: 50px 30px;
Con due valori avremo uno smusso di raggio 50px all’angolo in alto a sinistra e in basso a destra, 30px per i rimanenti.
– border-radius: 50px 10px 30 px;
Con tre valori avremo per l’angolo in alto a sinistra 50px, in alto a destra e in basso a sinistra 10px, in basso a destra 30px.
– border-radius: 50px 30px 10 px 0;
Con quattro valori avremo in senso orario, in alto a sinistra 50px, in alto a destra 30 px, in basso a destra 10px, in basso a sinistra 0px.
0px, significa nessun arrotondamento, quindi lo spigolo non sarà smussato.
Un’altra possibilità di utilizzo di border-radius è rappresentata dalla seguente notazione:
<style type="text/css">
div {
border-top-left-radius: 50px 30px;
border-top-right-radius: 60px 20px;
border-bottom-right-radius: 30px 10px;
border-bottom-left-radius: 20px 20px;
}
</style>
Analizzando la riga:
border-top-left-radius: 50px 30px;
che tradotta significa:
angolo in alto a sinistra: raggio in x, raggio in y (ovviamente si definisce un ovale).
Le altre righe com’é ovvio definiscono gli altri angoli.
