Border-radius bleeding

Question

I want to give border-radius to a <nav> in which all the <a> have an image has background, but the image keeps going outside the border-radius. Why is that?

Answer 1

To fix this in all browsers you should use:

-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

I found the answer here

Answer 2

Add:

-webkit-background-clip: padding-box;

To fix this in Webkit.

Answer 3

I had a problem with a bootstrap panel border or background bleeding to a HTML header <h> element above the bootstrap panel. The <h> element has class="page-header" and is contained in a div element with class="col-lg-12". The answers here and in other places didn't work for me.

What worked was adding this to the panels CSS class:

overflow:hidden;

I got the direction from here from Carol's answer.

Edit:

This caused another problem for me. I had Dropdown controls in the panel and the overflow:hidden; caused the dropdowns to be cut off and not displayed fully.

The dropdowns are contained in div elements with Bootstrap col-lg classes. I added style="position: inherit" to those div elements containing the dropdowns and that solved the problem.

The solution to that problem I found here.

Additional Option:

I added 3 or 4 <br/> elements before the div tag that was bleeding and that solved the bleeding problem without any bad side effects.