Por muito tempo para utilizarmos bordas arredondadas tínhamos que utilizar imagens, o que nunca foi uma boa saída. Com CSS 3 chegou uma solução bem mais robusta, o border-radius que funciona em praticamente todos os browsers, utilizando diferentes declarações. O IE não possui nenhum suporte a bordas arrendondadas, mas a Microsoft já declarou que o IE9 terá suporte.

Como ainda não existe compatibilidade é recomendada a utilização da prorpiedade somente para fins estéticos onde não irá afetar a usabilidade do site, então atenção ao utilizá-la.

A declaração oficial para bordas arrendondadas é radius-border, mas existem declarações derivadas que veremos mais adiante.

border-radius:10px;

Como as propriedades margin e padding podemos definir valores diferentes para cada canto:

border-radius: 10px 20px; 
border-radius: 10px 20px 30px 40px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

Também temos as declarações derivadas a seguir;

-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

Com o tempo os browsers irão utilizar a declaração oficial do W3C e não será mais necessário a utilização das declarações derivadas.

Bom era isso até mais e obrigado pelos peixes!