internet-explorer-7 - border-radius.htc は境界線を丸くしますが、画像は丸めません

Question

IE7 で角を丸くしようとして、border-radius.htcを使用しています。部分的に機能しています。境界線の角は丸くなりますが、画像は丸くなりません。その結果、正方形の画像の後ろに丸い境界線ができます。

<div id="container">
 <ul>
  <li>

    <img src="test.png">

  </li>
 </ul>
</div>

CSS

#container {
   position:relative;
   top: -20px;
   width:1000px;
   margin: 0 auto;
   margin-left:-10px;
}

#container li {
   float:left; 
   list-style:none; 
   margin: 0 5px; 
 }

#container ul li {
  width:180px; 
  height:200px;
}

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
}

Answer 1

overflow: hidden;画像に追加

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
   overflow: hidden; 
}

これを行う必要があるのは、理論的には div からオーバーフローしている画像のコーナーが隠されているためです。