Rounded image corners in IE8

Question

I have a few images generated dynamicaly :

<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>

And I would like them to have rounded corner so that in my CSS I put :

.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px; 
border-radius: 10px;    
behavior: url(css/PIE.php);
}

I can see the rounded corners in Firefox, Chrome and IE9 but it's not working in IE8. The PIE thing is already working with other elements in IE8.

Does anyone know what it could be ?

Thank you very much

Have you (re)read the Known Issues page? http://css3pie.com/documentation/known-issues/ You might have to set `position: relative` on the image or the parent element. — biziclop, Aug 05 '12 at 13:32
http://stackoverflow.com/questions/5449502/html5-and-css3-for-ie7-and-ie8 Hope this helps. — Brian Ruff, Aug 05 '12 at 21:13

score 0 · Answer 1 · answered Aug 05 '12 at 14:39

The only way I know of making rounded corners work in IE8 and below is with code like this:

<div class="image">
   <span class="tl"></span>
   <span class="tr"></span>
   <span class="br"></span>
   <span class="bl"></span>
</div>

and then with CSS like this:

.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }

where the background images are all images of rounded corners corresponding to that corner, e.g. the bottom right hand corner background image might look like this:

and so one (hope that makes sense)

There might be nicer ways to do this, as the above method is a bit laborious, and not particularly clean.

Saying that, I doubt any ways of getting rounded corners to work in IE8 and below will be particularly "clean". I usually just leave IE8 and below without rounded corners, not that many people even use 7 and 8 anymore in comparison to other browsers.

EDIT:

If I were you I'd steer well clear of code like this "behavior: url(css/PIE.php);" IE behaviours are not supported in other browsers, I think even Microsoft gave up on them.

score 0 · Answer 2 · answered Aug 07 '12 at 09:32

0

Finaly I made it work with CSS3 PIE. Rounded corners appear appear in IE7, IE8 and all other browsers. It was a coding mistake, sorry.

answered Aug 07 '12 at 09:32

Vincent Roye

2,751
7
33
53

Do you mind explaining what the mistake was, and then accepting this answer? – Inkbug Aug 08 '12 at 10:17

Rounded image corners in IE8

2 Answers2