How to round the top edges of the page?

How to round the edges of the page without breaking the transition animations? It happens when I use the CSS below but the animations are broken.

ion-content {
  border-top-left-radius: 5% !important;
  border-top-right-radius: 5% !important;
  -webkit-border-top-left-radius: 5% !important;
  -webkit-border-top-right-radius: 5% !important;
  overflow: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -moz-backface-visibility: hidden !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;