White corner showing on black box with Border-radius

Question

I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on

Answer 1

You should try on the parent div:

-webkit-background-clip: padding-box;

Answer 2

Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.

As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.

blockUI .overlay h1 {
    border-radius: 2px 2px 0 0;
}

Answer 3

I had same problem. But I solved.

.blockUI .overlay {background:#000;}

and remake some!

Answer 4

Finally fixed this completely by adding this on parent and child divs.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;