CSS3: angoli arrotondati senza programmi di fotoritocco

Nel web sono sempre più frequentemente utilizzate immagini di sfondo (per sezioni, div, titoli, ecc.) con gli angoli arrotondati. Anche il titolo di questo blog è stato inserito (da me) in un riquadro nero con angoli arrotondati realizzato con GIMP (da me).
Con CSS3 non c'è più bisogno di imparare ad usare GIMP (o addirittura Photoshop) per realizzare qualcosa del genere: è sufficiente utilizzare la proprietà border-radius e le sue varianti. Vediamo qualche esempio.

Impostiamo tutti gli angoli in un sol colpo.

border-radius:6px

Solo il bordo in alto a sinistra.

border-top-left-radius:6px

Solo in alto a destra.

border-top-right-radius:6px

Solo in basso a sinistra.

border-bottom-left-radius:6px

Solo in basso a destra.

border-bottom-right-radius:6px

Impostiamo un raggio asimmetrico (angolo ellittico invece che circolare), ma non è ancora correttamente supportato dai browser quindi non è possibile visualizzare il risultato corretto (quello che prevede due raggi distinti, uno orizzontale e uno verticale, per ciascun angolo), comunque potrebbe risultare utile.

border-radius:3px 10px

Possiamo anche realizzare un div circolare, lascio al lettore scoprire come.