[Resolvido] Imagem dentro de div com borda extrapolando

[guitarro17 0]

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

 

consegui resolver seguindo isso:

http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/

 

ou seja, colocar a imagem como background da div... simples