24

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?

Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189

3 Answers3

28

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

tgandrews
  • 12,349
  • 15
  • 43
  • 55
  • 1
    Thanx! I had to figure out why this not always worked: background-clip must be **AFTER** *border, border-radius, background* and all other proprieties that could matter (FireFox 49.0.2 under Linux). – j.c Nov 18 '16 at 08:40
4

Add:

-webkit-background-clip: padding-box;

To fix this in Webkit.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
2

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.

Dov Miller
  • 1,958
  • 5
  • 34
  • 46