Border-radius in Chrome error?

Question

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

On a braid it works fine, but on chrome it looks funny ... On a braid, I see a circle bordering my image, but on chrome a circle cuts off the borders, and all I see is a straight line

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

You can help?

Answer 1

this is probably a chrome mistake. The solution could be to wrap 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/

Answer 2

I had the same problem and a solution was provided:

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

fixed problem.

It first shows the solution using only CSS3 and HTML, and then presents the solution using jQuery.

Answer 3

Try to do this on the background image and not on the html img element, as some img elements do not work with the border radius (still I am gueass).

 div.something{ background-image:url(something.png); border-radius: 24px; border: 2px solid #c7c7c7; border-radius: 24px; } 

Answer 4

not just the code below for the frame

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

In order for the radius to be applied clockwise, starting from the upper left corner, you cannot do this for Webkit at the moment. Therefore, you need to write a long arm 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;