Why is the border radius of the element on the back visible?

Question

I have two elements: article (which is in the back) and header which is in the front:

article[_v-e514def2] {      
    background-color: #fff;
    border-bottom: 2px solid #2a2721;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 400px;
    border-radius: 3px;
}
    
article header[_v-e514def2] {
    background-color: #484a47;
    padding: 5px 0;
    border-radius: 3px 3px 0 0;
}

<article _v-e514def2="">
    <header _v-e514def2="">
        <h3 _v-e514def2="">Hardcoded Title</h3>
    </header>
    <section _v-e514def2="">
        <p>...</p>
    </section>
</article>

As you can see they have the same border radius. However, you can see the border of the element on the back:

Is this normal? If so, what's the easiest workaround?

Here's the JSFiddle.

Have you tried adding `z-index: 1;` or `z-index: 1000;` for your article definition of css? — Amir, Mar 23 '16 at 14:46
Possible duplicate of [Forcing child to obey parent's curved borders in CSS](http://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css) — Vucko, Mar 23 '16 at 14:54

score 1 · Accepted Answer · answered Mar 23 '16 at 14:50

1

I give you two solutions:

DEMO 1

Put a margin-top: -1px; on:

CSS

article header[_v-e514def2] {
  background-color: #484a47;
  padding: 5px 0;  
  border-radius: 3px 3px 0 0;
  margin-top: -1px;
}

DEMO 2

Increase border-radius: 5px 3px; on:

CSS

article[_v-e514def2] {
   background-color: #fff;
   border-bottom: 2px solid #2a2721;
   position: absolute;
   top: 10px;
   left: 10px;
   width: 400px;
   height: 400px;
   border-radius: 5px 3px;  
}

answered Mar 23 '16 at 14:50

Black Sheep

6,604
7
30
51

Thanks. So this is a normal CSS rendering behavior? – alexchenco Mar 23 '16 at 14:53
`:)` I thinks so.. Vucko has given you a good link with the specs. – Black Sheep Mar 23 '16 at 14:59

Why is the border radius of the element on the back visible?

1 Answers1