Ionic 3 - Modal screen with rounded corners

Question

How to round a modal screen like this link ?

My CSS code is:

.modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 25% 15%  !important;
   display: block;
   border-radius: 25px;
 }

modal.html

   <ion-content>
     <div class="subtitulo">
       <h4>Select your city</h4>
     </div>

    <ion-list>
      <button ion-item *ngFor="let cidade of cidades" (click)="selCidade(cidade)" detail-none>
        <h3 text-wrap>{{ cidade.nome }}</h3>
        <ion-icon name="ios-arrow-forward" item-right></ion-icon>
      </button>
     </ion-list>
   </ion-content>

But the border-radius have no effect. I tried some tutorials, but no one has effect.

I need some help in CSS for this case

Tks,

Answer 1

Just posting the solution for ionic 4:

in global.scss, just change the scss variable of the ionic component "ion-modal"

ion-modal {
  --border-radius: 8px!important;
}