White corner showing on a black box with border radius

Question

I get an odd effect (currently in chrome). I created my own overlay dialog box. which has a translucent background sitting on top of my site with a box on top of it. the top of the panel, as you can see, has a black background. The main part of the box is a white thought.

It is not easy to understand, but it annoys me.

White behind. (I know, as if I change it to red, it changes color), which you see in the upper right corner of the screenshots, just above “X”

Both the title and the field have a border radius of 3px

.blockUI .overlay { background: #f00; border-radius: 3px; margin: 0 auto; padding: 10px; overflow: hidden; position: relative; top: 20%; text-align: inherit; width: 600px; z-index: 10009; } blockUI .overlay h1 { background: #000; border-bottom: 2px solid #F48421; border-radius: 3px 3px 0 0; color: #FFF; font-family: 'Roboto', sans-serif; font-weight: 300; margin: -10px; padding: 10px; } 

Answer 1

Since overflow: hidden; together with border-radius , it seems to cause some inconsistencies in some engines (look at this) , you need to use the border radius for both parent and child elements to achieve rounded corners.

As you noticed, you still get some supernatural results with the addition of extra pixels. Simply reduce the radius of the child’s border (or vice versa) to compensate for this.

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

Answer 2

I had the same problem. But I decided.

 .blockUI .overlay {background:#000;} 

and redo some of them!

Answer 3

You should try the parent div:

 -webkit-background-clip: padding-box; 

Answer 4

Finally, completely fix this by adding this to the parent and child div.

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