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:

Solution 1:

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...

Solution 2:

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.

Solution 3:

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: 40px40px40px40px;
    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;
}
.headerspan
{
    background-color: #F7F7F7;
    display: inline-block;
    width:100%;
    border-radius: 20px20px;
}

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.

Solution 4:

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: 0px0px0px20pxrgba(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

Solution 5:

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.