border-radius in Chrome bug?
this is probably a chrome bug. A solution could be to wrap the img with a div and make the following css:
img{ -moz-border-radius:24px; -webkit-border-radius: 24px; border-radius: 24px; display:block;}div { border: 2px solid #c7c7c7; border-radius: 24px; -webkit-border-radius: 24px; width:40px; /* the width of image */ height:40px; /* the height of image */}
I had the same problem and the solution provided by:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
fixed the problem.
First it shows the solution using only CSS3 & HTML and then it presents the solution using JQuery.
Try doing it on a background image instead of on a html img element, as some img elements dont work with border radius (yet i gueass).
div.something{background-image:url(something.png);border-radius: 24px;border: 2px solid #c7c7c7;border-radius: 24px;}