CSS Problem with rounded corners in chrome

i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it开发者_运维知识库 is there . here's a demo of my work : http://anisa.me/work/ Any help would be highly appreciated .

I succeeded in achieving what you wanted using jQuery ...

First load jQuery correctly (currently not loaded) and add this css rule

#bi-max { border-radius: 0 0 0 10px; }

Then using JavaScript :

$('#bi-max').css("background","url("+jQuery("#bi-max img").attr('src')+")");
$('#bi-max img').css("opacity","0")

This way the background of the big image container change to be like the big image ... with the border radius hiding the rest of it.

Then we set the background of the A elements to the images they contain

$('#bi-min a').each(function(){
    jQuery(this).css("background","url("+jQuery(this).find("img").attr("src")+")");
})
$('#bi-min a img').css("opacity","0");

Then we use jQuery to set the rounded corner to the lower right corner of the last A element.

$('#bi-min a:last').css("border-radius","0 0 10px 0")

Can post it to jsfiddle if you find it hard to follow.

Regards

Your question is not quite right. It should sound like "Why does FF show rounded image corners correctly?" :) FF is the only one, who supports it.

Possible solutions:

1. If an image has fixed size, you can insert some html element (span or div) with the same size and make your image as a background to this element. The image must be hidden then. An example: http://arsen.ws/folio/craft-design/cosmic-games.html

2. Save corners as separate images and position each of them absolutely above appropriate corner of the image.

3. Use JS library to round corners http://www.netzgesta.de/corner/