裏面の要素のボーダー半径が表示されるのはなぜですか？

Question

私は2つの要素があります：あなたは、彼らが同じボーダー半径を持って見ることができるように

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>

：article（背面にある）と、正面にあるheaderを。しかし、あなたは背中に要素の境界を見ることができます：

これは正常ですか？もしそうなら、最も簡単な回避策は何ですか？

ここにはJSFiddleがあります。

Answer 1

私はあなたの2つのソリューション提供：margin-top: -1px;に入れ

DEMO 1

を：

CSS

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

DEMO 2

増加をborder-radius: 5px 3px;は上：

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