Como fazer borda arredondada no FireFox e no IE com css?

E ai pessoal, semana passada eu estava ajudando uma colega, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliar-se sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no Internet Explore “IE” então eu fiz umas pesquisas no google até que eu achei o site html remix, então postar aqui para ajudar todo mundo que tem essa mesma dúvida.

Nessa primeira imagem se vocês clicarem nela vocês vão ver a primeira versão, nessa só funciona no FireFox e no IE não pega a borda arredondada por causa do “style:  -moz-border-radius“ não funciona no IE:

Clique sobre a imagem para ir na página de demonstração

#primeira{
  border:1px solid red;
  width:199px;
  height:220px;
  background:#000;
  text-align:center;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

#primeira span{
   font-family:Arial;
   font-size:12px; color:#fff;
}

Nessa segunda imagem se vocês clicarem nela vocês vão ver que está funcionando no FireFox e no IE também eu tive que adicionar um “style: behavior“ nela eu chamo um documento .htc para emular o “-moz-border-radius” no IE.

Clique sobre a imagem para ir na página de demonstração

#segunda{
  border:1px solid red;
  width:199px; 
  height:220px;
  background:#000;
  text-align:center;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  behavior:url(border-radius.htc);
}

#segunda span{
  font-family:Arial;
  font-size:12px;
  color:#fff;
}