背景色和边框半径之间的空白区域

Question

I saw some white space between green background-color and border-radius (especially when I zoom-in).

Is there any fix?

https://codepen.io/anon/pen/oPjgJZ

 .container{ width: 250px; height: 300px; background-color: antiquewhite; border: solid 2px green; border-radius: 40px; overflow: hidden; } .header{ height: 15%; background-color: green; display: flex; justify-content: center; align-items: center; } 

 <div class='container'> <div class='header'>HeaderText</div> </div> 

Answer 1

Try this:

1. Remove overflow:hidden from .container
2. Give border-radius:34px 34px 0 0; to .header

 .container { width: 250px; height: 300px; background-color: antiquewhite; border: solid 2px green; border-radius: 40px; } .header { height: 15%; background-color: green; display: flex; justify-content: center; align-items: center; border-radius: 34px 34px 0 0; } 

 <div class='container'> <div class='header'>HeaderText</div> </div> 

Answer 2

I don't know what the reason is, but I just change background-color color-block to linear-gradient in parent's css to make sure the background's color on 15% height parent has same color with the header. So there is no any white-space anymore.

 .container{ width: 250px; height: 300px; border: solid 2px green; border-radius: 40px; overflow: hidden; background: linear-gradient(to bottom, green, 15%, antiquewhite 15%); } .header{ height: 15%; background-color: green; display: flex; justify-content: center; align-items: center; } 

 <div class='container'> <div class='header'>HeaderText</div> </div>