Border-radius and padding not playing nice

Question

I\'m having trouble trying to get a radius on images. I\'ve simplified my problem and exaggerated the variables for demonstration purposes.

CSS:

Answer 1

This is a byproduct of applying both padding and a border-radius to the same element in some browsers (mostly IE and safari). The border-radius changes the curvature of the border component of the box model, which surrounds the padding component.

In addition to the other answers, another interesting thing that seems to fix the issue is adding a border line. If you don't want to see the border, you could use border: 1px solid transparent, like this:

.invisible-border {
    border: 1px solid transparent;
}

Demo in jsFiddle