(Resolvido) Imagem dentro de div com borda extrapolando

[guitarro17]

Seguinte, eu acho que é meio difícil explicar o que eu quero, então eu vou mostrar por imagens:

1 - eu tenho a seguinte div com BORDAS ARREDONDADAS:

considerem a parte BRANCA como sendo TRANSPARENTE, e a parte amarela o BACKGROUND da página, ou seja, a DIV é transparente e no lugar do branco seria o background...

2 - eu tenho varias imagens tipo essa, todas do mesmo tamanho e com o fundo variando de cor:

2 - e eu quero colocar a imagem DENTRO da div, porém, a imagem ocuparia TODA a div. Só que as imagens não tem as bordas arredondadas, logo, ela extrapolaria a div, e eu queria saber se tem um jeito de ficar mais ou menos assim:

Meu código da div:

.divArredondada{
    border:5px #A5241C solid;
    border-radius:20px; 
    -moz-border-radius:20px; 
    -webkit-border-radius:30px;
    width:150px;
    height:118px;
    margin-left:40px;
}

e a utilização:

<div class="divArredondada">
    <div>
          <a href="index.php?secao=produtos&subsecao=<?php echo $subsecao ?>∏=<?php echo $res['id']?>"> 
              <img src="<?php echo $imagem ?>" width="150px" height="118px">
          </a>
    </div>
</div>

as imagens tem o mesmo tamanho, 150px por 118px

[_Vinny_]

Coloca a imagem como background da div.

[guitarro17]

é verdade, quando vim aqui dizer que tinha encontrado essa solução, você já havia respondido haha

de qualquer forma, aqui tem um exemplo:

http://stick.gk2.sk/blog/2009/03/image-wit...ers-using-css3/

[_Vinny_]

Nesse exemplo é simples, basta colocar o border-radius diretamente como CSS da imagem ao invés da div.

[SK15]

Valer lembrar que CSS3 ainda está em desevolvimento igual HTML 5 então é bom evitar as tags por enquanto usando somente para testes ...

Por agora é aconsehavel a usar a dica do _Vinny_ ...