How to make bottom corners of header rounded in Ionic

Question

Im trying to implement such a header below.

rounded bottom corners

Here is my solution,

 ion-content { --background: #817afb; } div.main { height: 100%; background-color: white; border-radius: 20px 20px 0px 0px; overflow: auto; }

 <ion-content fullscreen> <div class="main">.... </div> </ion-content>

It is not working well when I try to use ion-refresher and ion-infinite-scroll. Anyone who has a solution suggestion?

Answer 1

ion-content {
    --background: #817afb; 
}

.main {

    enter code here
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    overflow: auto;
    position: absolute;
    top: 40px !important;
    
}