CODEWITHSUNDEEP
htmlcss
wyc
wyc

Reputation: 55273

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

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

However, I needed to enable th user to scroll the content of the parent, but to do that I had to set the parent to overflow: scroll

But this made the parent's border to show up again (the white on the top left):

I

How can I enable scrolling and hid the parent's border radius at the same time?

Here's the JSFiddle: https://jsfiddle.net/qjog7tvu/

Upvotes: 0

Views: 167

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

Set border-radius of child to 5px initially and when it user starts scrolling after scrolling till the header change border-radius to 3px with jquery like this

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

According to my knowledge this is the only solution as if there is 5px border-radius of parent and 3px of child then it is natural that 2px space will be there so the best you can do is change it dynamically.

Upvotes: 1

Related Questions