外层div边框与内层div之间出现背景色透显的原因是什么？

这段代码在Codepen中显示的问题并不明显，但在我的React应用中却十分影响观感。

相关代码如下：

<div class="outside">
  <div class="inside">
    
  </div>
</div>

.outside{
  width:400px;
  height:200px;
  border:20px solid skyblue ;
  border-radius:8px;
  background-color:blue;
}
.inside{
  width:100%;
  height:100px;
  background-color:skyblue;
}

问题示意图：

这个问题的核心是父元素设置了border-radius，但子元素未适配圆角，导致父元素的背景色在圆角缝隙处显露。React环境下可能因渲染细节，这个缝隙表现得更突出，可通过两种方式解决：

• 方式一：给子元素添加对应圆角，贴合父元素的边角：

.inside{
  width:100%;
  height:100px;
  background-color:skyblue;
  border-radius:8px 8px 0 0; /* 仅设置顶部圆角，与父元素保持一致 */
}

• 方式二：给父元素添加overflow: hidden，裁剪超出圆角的子元素部分：

.outside{
  width:400px;
  height:200px;
  border:20px solid skyblue ;
  border-radius:8px;
  background-color:blue;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者chriskevini