CSS Issue with Ion-tab-bar and ion-content issue - iOS build

[1Samit1]

I have tried to style the ion-tab-bar for my app using the following style:

ion-tab-bar{
    position: absolute;
    border-radius: 10px;
    width: 95%;
    margin: 5px 2.5%;
    bottom: 0px;
}

ion-tabs{
    padding-bottom: 66px;
    background: linear-gradient(to bottom right, #2CD695, #979CD6);
}

When building for Android there are no Issues as it displays it exactly as styled. However when building for iOS the css border-radius is completely ignored. Along with this the top of the ion-content seems to be under the statusbar whereas in Android no such issue is faced. Please see the attached screenshots.

Hope to get some quick advice from the community. Thanks in advance

iPhone 11

iPhone 8

Android

[1Samit1]

After some research, I decided to only style the Android version and ditch the iOS version. From Ionic Docs add platform specific styles so that iOS would use the standard ion-tab-bar and only Android would use the styled one.

ion-tab-bar.md{
    position: absolute;
    border-radius: 10px;
    width: 95%;
    margin: 5px 2.5%;
    bottom: 0px;
}

I fixed the overlap of the statusbar by using the env() variable to style the ion-content as there is no ion-header, personally with tabs I feel there shouldn’t be a header. Looks more aesthetically pleasing:

.ios ion-content{
    --padding-top: env(safe-area-inset-top);
}