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.

I think you forgot the image HTML in that fiddle. Same goes for any CSS applied to the image. Please update it accordingly. Or are we talking about a background-image to the `
`? — Henrik Ammer, Sep 13 '12 at 10:18

score 33 · Answer 1 · answered Sep 13 '12 at 10:26

33

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

Regards.

answered Sep 13 '12 at 10:26

Aymeric

997
6
10

@RMI Flores Is that what you were looking for? – Aymeric Sep 14 '12 at 08:18
1

This is a great answer. Helped me. Too bad it wasn't accepted. – Ray Toal Aug 25 '17 at 07:19

score 4 · Answer 2 · answered Dec 05 '19 at 10:10

4

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

answered Dec 05 '19 at 10:10

Luca C.

7,969
67
67

Border is cutting off when using border-radius?

2 Answers2