Comments on: CSS3 Questions Answered

By: admin

admin — Wed, 14 Jul 2010 16:09:44 +0000

Hi Stephan,

sorry I missed this in your original question, -moz-border-radius doesn’t work on images in firefox yet. Only browser I’ve got it to work in is Safari, but it should work in any -webkit browser.

By: Stephan

Stephan — Wed, 14 Jul 2010 13:37:59 +0000

Nope it doesn’t help, you mean to apply that rule on the image itself?

What I’ve figured out until now is that Firefox apply rounded corners only on transparency-background images and in order to see that effect a css background-color rule should be added or a solid border.
This is my progress for now :(
I hope your experience would add something to this matter.

By: admin

admin — Tue, 13 Jul 2010 18:27:22 +0000

Hi Stephan, try adding this property to the CSS.

border-collapse: collapse;

By: Stephan

Stephan — Tue, 13 Jul 2010 09:08:15 +0000

Hi Matt, my name is Stephan and I would like to ask you about a css3 issue.
It concerns the border-radius property.
So I’m using Jquery for a swap image effect like:

$(“#card-1″).mouseover( function(){$(“#Toucan”).attr({src:”images/t9tuqui.png”}).css(“-moz-border-radius”, “12px” ); })
.mouseleave( function(){$(“#Toucan”).attr({src:”images/t9tuqui_trans.png”}); });

and when applying

li img{border:solid 1px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px;}

the swap image is round-cornered only under safari :(
However if I apply a “solid border”-property on the images it works fine except that my design is ruined.

I hope there is a solution, appreciate any help and thanks in advance.

All best
Stephan :)