Border is cutting off when using border-radius?

html border overlap css
RMi Flores picture RMi Flores · Sep 13, 2012 · Viewed 11.6k times · Source

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

Aymeric picture Aymeric · Sep 13, 2012

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

Regards.

Related questions

Overlapping table element left and right border

I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells …

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More