La proprietà border-radius, attuamente del tutto supportata solo da Firefox e Safari, anche se Google Chrome si è ormai affiancato a questi due browser, è molto versatile.

Basta infatti aggiungere le seguenti regole::

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

per arrotondare con un raggio di 10 pixel tutti gli angoli del nostro DIV o altro settore, ed è anche la soluzione migliore nella stragrande maggioranza dei casi.

La specifica CSS3 ha dato ai webdesigner ancora più controllo del codice css cosicchè si possano sbizzarrire con la loro fantasia. E’ posibile infatti arrotondare anche solo un angolo di un box con seguenti codici

-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;
-webkit-border-radius-topright: 10px;

-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomright: 10px;

Come si può ben notare a differenza della regola base basta aggiungere topleft, topright, bottomleft o bottomright e scegliere l’ampiezza del raggio (negli esempi sono tutti a 10 px ma può essere di quanto volete).