Border radius not working on an ion-content element with scrollable content

ionic-v1
1

Continuing the discussion from How to put element outside ion-content > .scroll:

Having a somewhat related issue, whereby the border radius on a ion-content simply doesn’t work when it contains scrollable content :confused: can’t seem to find a solution to this.

I’ve tried the much suggested border-radius and overflow:hidden on the DOM contents to no avail, is there any fix for this? Something that’s specific to Ionic and Ion-content.

<ion-content class="leaderboard-content">
    <ion-item ng-repeat="league in privateLeagues">
    </ion-item>
</ion-content>

That’s the rough structure of the DOM I’m using, with the border radius set on the ion-content and with overflow:hidden and similarly on the contained ion-items.

Totally stumped on this!

2

Solved this myself. Seems like the framework adds top padding to a ion-content box by default to counter this error, and I had seen the additional padding and removed it for styling reasons and hence broke the border radius.