How to add border-radius to img inside <ion-img>?

Question

I want to set a border-radius to the img tag inside <ion-img>.

I've tried to add

img { border-radius: 16px}

in .scss component style, in variable.scss and in global.scss but did not work.

Answer 1

Try to add your CSS class to <ion-img>.

HTML - home.page.html

<ion-img [src]="img" class="your-class"></ion-img>

CSS - home.page.scss

.your-class {
   border-radius: 16px !important;
   overflow: hidden;
}