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 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With