It's not as obvious in codepen but in my react app it's quite distracting.
<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;
}
The pehnomenon is very obvious (at least on my Chrome/Edge on Windows10) if you just run the code you have given and zoom in and out - the lines come and go.
It's caused by screen pixels getting 'left behind' when the system has to decide how to map part pixels - 1 CSS pixel on a modern screen maps to several screen pixels.
A slight hack but it does the job is to put the background of inner onto a pseudo before element rather than on the inner element itself, making the pseudo element just slightly bigger and positioned slightly offset so it covers up those spurious lines.
.outside {
width: 400px;
height: 200px;
border: 20px solid skyblue;
border-radius: 8px;
background-color: blue;
}
.inside {
width: 100%;
height: 100px;
position: relative;
z-index: 0;
}
.inside::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
background-color: skyblue;
z-index: -1;
}<div class="outside">
<div class="inside">
</div>
</div>