Question

I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).

What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there’s a little white line appearing on the corner edge.

I made a reduced test case here: http://dabblet.com/gist/3828561

Anyone have a solution to overcome this one? Thanks!

Answer 1

A dimensions-dependent solution…but maybe that’s OK since it’s a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.

Once you apply the height/line-height, you don’t have to use overflow: hidden.

Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:

.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }

And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:

.outer { border-radius: 10px 3px 3px 10px; }

http://dabblet.com/gist/3828755