html - How to hide the border radius of a parent that has overflow set to scroll? -

the parent has border-radius of 5px. children (the top black part) has border-radius of 3px. made parent's border covered children's

however, needed enable th user scroll content of parent, had set parent overflow: scroll

but made parent's border show again (the white on top left):

how can enable scrolling , hid parent's border radius @ same time?

here's jsfiddle: https://jsfiddle.net/qjog7tvu/

set border-radius of child 5px , when user starts scrolling after scrolling till header change border-radius 3px jquery this

$(document).ready(function(){    var headerheight = $('header').height()    $('article[_v-e514def2]').scrolltop(headerheight);    $('header').css('border-radius','3px'); }) 

according knowledge solution if there 5px border-radius of parent , 3px of child natural 2px space there best can change dynamically.