Bordas arredondadas em todos os navegadores

Tempos atrás, sempre era necessário abrir o Photoshop quando era tinhamos vontade de obter aquele efeito de imagens com bordas arredondadas, porém hoje com CSS3 é possível alcançar este efeito facilmente, vejam como
Primeiro precisamos selecionar nossa imagem no DOM, você pode usar o seletor img que selecionaria todas as imagens da sua página, mas creio que não seja esse efeito que você queria não? Então ou você pode adicionar uma class ou um id para essas imagens que ficaria assim

Código:

<img src="#" class="image-rounded" />

Ou então pode selecionar as imagens dentro de determinada div ou elemento.. Assim:

Código:

<div class="post-images"><img src="#" /><img src="#" /><img src="#" /></div>

Na primeira forma você usaria esse CSS para selecionar o elemento

Código:

.image-rounded{ /*do something*/ }

E na segunda esse

Código:

.post-images img{ /*do something*/ }

Mas isso a maioria ja deve saber, vamos ao que interessa..

A propriedade que faz as bordas ficarem arredondadas é a border-radius, eu não sei como anda sua aceitação nos navegadores antigos, mas acho que nos mais modernos todos ja dão suporte..

No primeiro exemplo poderiamos usar o seguinte código

Código:

.image-rounded{ border-radius: 50%; }

Assim sua imagem ficaria perfeitamente redonda..

Você pode experimentar os valores até achar um que você goste!

No caso de você precisar de suporte em mais navegadores aqui está uma opção

Mozilla Firefox

Código:

-moz-border-radius: ;
-moz-border-radius-topLeft: ;
-moz-border-radius-topRight: ;
-moz-border-radius-bottomLeft: ;
-moz-border-radius-bottomRight: ;

Chrome, Safari

Código:

-webkit-border-radius: ;
-webkit-border-top-left-radius: ;
-webkit-border-top-right-radius: ;
-webkit-border-bottom-left-radius: ;
-webkit-border-bottom-right-radius: ;

Opera, IE9

Código:

border-radius: ;
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;

O título do fórum foi se referindo a imagens, mas você pode usar o efeito em diversos elementos no documento..

Muito bom amigo! Não vejo a hora de padronizar esses seletores...

JS

A propriedade que faz as bordas ficarem arredondadas é a border-radius, eu não sei como anda sua aceitação nos navegadores antigos, mas acho que nos mais modernos todos ja dão suporte..

Como tu disse, todos os navegadores atuais em sua ultima versão já suportam  border-radius no padrão w3C, Não é necessário mais o prefixo, estou falando do border-radius, os gradientes ainda não