0

This is best explained with images.

Firefox, right: enter image description here

Chrome, wrong: enter image description here

jsfiddle.

That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.

Is it possible to achieve the correct result in Chrome without extra markup nor javascript?

Camilo Martin
  • 37,236
  • 20
  • 111
  • 154

2 Answers2

2

I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).

When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).

Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).

Community
  • 1
  • 1
Cat
  • 66,919
  • 24
  • 133
  • 141
  • You know, originally I wasn't considering using a `div` instead of an `img` for a simple reason: they were avatars and I had to have them generated in the markup. But then I figured out, I can just as well have the images in the markup with `
    `, so I think that fixes the problem :)     – Camilo Martin Aug 24 '12 at 23:24
1

Apparently it is a bug in chrome..

I normally apply box-shadow for chrome instead of border.

so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/

heisthedon
  • 3,657
  • 3
  • 21
  • 24
  • I didn't think about the spread of a box-shadow! It's indeed a nice trick. I'm choosing the other solution just because it doesn't require me to change paddings/margins here and there (the borders account for size whereas box-shadow does not), but it's certainly just as valid as a solution. – Camilo Martin Aug 24 '12 at 23:31
  • I wish I could tick you too because that shadow-as-border trick is useful elsewhere too. – Camilo Martin Aug 24 '12 at 23:39