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 top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.

Its not the easyist to see but it is annoying me.

The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"

Both the header and the box has a border radius 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;
}

Solution 1

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;
}

Solution 2

I had same problem. But I solved.

.blockUI .overlay {background:#000;}

and remake some!

Solution 3

You should try on the parent div:

-webkit-background-clip: padding-box;

Solution 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;

View more solutions

Comments

[Nathan Hornby]

This certainly helps, but unfortunately some of the parent element still comes through even using this technique (in firefox at least)

[darksky]

Bootstrap already does this: github.com/twbs/bootstrap/blob/v3.3.7/dist/css/…

[Finickyflame]

Adding "backgroung-clip: context-box;" solved my issue. Thanks for the heads up