CODEWITHSUNDEEP
htmlbordercss
oliverw92
oliverw92

Reputation: 259

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: padding;
    background-clip: padding-box;
    margin-top: 20px;
}

Any ideas?

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

Upvotes: 1

Views: 5722

Answers (5)

Andrew Brown
Andrew Brown

Reputation: 1

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.

Upvotes: 0

Michael
Michael

Reputation: 484

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

Upvotes: 0

Lea Verou
Lea Verou

Reputation: 23887

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

Upvotes: 2

Kerri Shotts
Kerri Shotts

Reputation: 2372

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.

Upvotes: 0

icktoofay
icktoofay

Reputation: 129011

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.

Upvotes: 1

Related Questions