ボーダー半径を使うときに常に白い角があります

Question

私は白い背景の上に黒のドームを置きたいと思います。 しかし、角には常に空白があります。何故ですか？追加、

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius: 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>

ここ

であるこの特定の場合にはフィドルhttp://jsfiddle.net/zoosyuvq/1/

Answer 1

：

ここ

コードであります

解決する必要があります。これにより、境界線が上になり、丸め計算が同じように機能します。

Answer 2

このようにします。

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius: 0 0 4px 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 0 0 4px 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>

Answer 3

上隅に5pxのボーダー半径とこれを試してみてください。

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius:5px 5px 4px 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
    box-sizing: border-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>