Setting rounded corners(Border radius) for Internet explorer IE6+

Question

I am trying to get rounded corners in IE6, 7 and 8 using ie-css3.htc source: http://fetchak.com/ie-css3/

here is css class:

.box {
   position: absolute;
   display: block;  

background:  url(images/img.gif) no-repeat top left;
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

   height: 200px;
   width: 350px;

    behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
  }

When I apply it to div it works(get rounded corners):

<div class="box" />

But when I apply it to image tag it doesn't work,

<img class="box" src="images/img.gif" />

is there workaround for this, because I need it to work, for image tag.

Answer 1

It doesn't work because on IE, your <img> has a background of img.gif . The background-image is well rounded. But as it's a <img> tag, it also has a (square) image in it, displayed over the background. So even if your background is rounded, the image inside is not.