CODEWITHSUNDEEP
htmlcssgoogle-chrome
ivordesign
ivordesign

Reputation: 335

css border radius bug in chrome with percentages

Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.

Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change

Upvotes: 0

Views: 1017

Answers (3)

ivordesign
ivordesign

Reputation: 335

I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result

Upvotes: 1

scurker
scurker

Reputation: 4753

Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.

One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34863

What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.

According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.

The content of replaced elements is always trimmed to the content edge curve.

Which, to me, means that Chrome is following the spec correctly on this.

Upvotes: 2

Related Questions