border-radius in Chrome bug?

I have a problem with the border-radius in chrome this is my code:

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

开发者_StackOverflow中文版

On mozzila it works fine, but on chrome it looks funny... On mozzila I can see a circle bordering my image, but on chrome the circle crops the borders and all i can see are straight line

a screenshot: http://postimage.org/image/27turq0mc/

can you help?

---

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 */
}

Demo: http://jsfiddle.net/EnmMp/1/

---

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;
}

---

instead of just the below code for border

-moz-border-radius: 2px 2px 15px 15px;

For the radius to be applied clockwise starting from top-left, you can’t do that for Webkit at the moment. So you have to write it out long hand like:

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;