css3 border-radius - inside is square on Chrome + Safari?

It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):

firefox

In Chrome and Safari the insides of the border are square for some reason:

chrome

Here is my CSS:

.header {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);
    -moz-background-clip: padding;
    -webkit-background-clip: padd开发者_开发技巧ing;
    background-clip: padding-box;
    margin-top: 20px;
}

Any ideas?

EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/

It's a known Webkit and Opera bug: https://bugs.webkit.org/show_bug.cgi?id=23166

Until it's fixed, your only way around it is using 2 elements I'm afraid...

If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.

I think this is normal Webkit behavior when clipping to the box's padding. The padding is square, i.e., not defined by the border's curves, and so the background color overlays portions of the border.

Try this instead (via a SPAN nested inside your DIV):

CSS: 
body {
    background-color: #999;   
}
.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px 40px 40px 40px;
    border: 20px solid rgba(255,255,255,0.1);  
    margin-top: 20px;
    height: 85px;
    font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}
.header span
{
    background-color: #F7F7F7;
    display: inline-block;
    width:100%;
    border-radius: 20px 20px;
}

HTML:
<div class="header">
    <span>DataLog</span>
</div>

Side Note: Aside from your code, I didn't bother adding all the vendor prefixes; I'll leave that to you.

Or you can just use a box-shadow and adjust the top margin. My example only includes the -web-kit versions

.header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    -webkit-border-radius: 40px;
    -webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
    margin-top: 40px;
    height: 85px;
     font-weight: 100;
    font-size: 70px;
    vertical-align: middle;
    text-align: center;
}

Here is a similar JSFiddle to your first example using only your original div

I have been experiencing a similar issue. It turned out that because the container inside the container that i have added with the border-radius has a background-colour, it covers the inside of the border.

To rectify this i have added a border-radius to the child object as well as it makes it look the same.