Border is cutting off when using border-radius?

Question

I have an image which has a 5px border around it and I wanted to round the corners of both the image and the border, but in webkit the image remained rectangular whereas the corners of the border were rounded. As a result, the image overlapped the border and created what looks like a gap between the lines of the border at each corner.

I'd like it to look like this http://jsfiddle.net/rmi14/HWDtx/19/ , but on webkit, the white background is rectangular and ends up overlapping some of the light blue border and cutting it off.

Answer 1

You have to use the overflow property for your div as it is showed in this fiddle

Regards.

Answer 2

because the content angles overflows the rounded borders of the container angles

you can use:

border-radius: ...
overflow: hidden; /*add this*/

to cut off the angles of the content that overflows