border-radius.htc делает границу округлой, но не

Question

Я использую border-radius.htc, пытаясь сделать круглые углы в IE7. Он частично работает, граница имеет закругленные углы, но не изображение, в результате чего круглая рамка за квадратным изображением.

<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, скрыты.