CODEWITHSUNDEEP
webkitbordercss
user623520
user623520

Reputation:

img with border-radius overlays its border

In webkit if I set border radius on an image that has a border, the image won't sit nicely within the border but overlay the border and remains square.

http://jsfiddle.net/ECNJ4/

Any fixes that don't mean using a background image instead or adding markup?

Upvotes: 1

Views: 436

Answers (2)

Saurabh Kumar
Saurabh Kumar

Reputation: 5945

check out: http://jsfiddle.net/ECNJ4/6/

CSS

img {
  border-radius: 15px;
  box-shadow: 0 0 0 16px red;
}

​

Upvotes: 1

Johan Nordberg
Johan Nordberg

Reputation: 3777

I had to use a wrapper element around the img to make it work. Maybe there's a better solution, but I didn't find it.

Upvotes: 0

Related Questions