How to add border-radius to ion-img in Ionic 4

Question

I need to add border-radius to ion-img but it seems shadow DOM won't let me modify.

HTML

<ion-img [src]="img-url" [alt]="alt"></ion-img>

CSS

ion-img  {
    border-radius: 10px !important;
}

Answer 1

The correct, non-obvious, way to do this is with CSS shadow parts.

In this case ion-img has a shadow part image so our SCSS looks like:

ion-img::part(image) {
  border-radius: 10px;
}

Yes, the part has no quotes and is the full word "image" (not "img" we need the part name, not the target tag name).

Answer 2

HTML

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

CSS

.your-img {
    border-radius: 10px !important;
    overflow: hidden;
}

Answer 3

1. put the image inside of card

    <ion-card>
        <ion-img  src="imag"></ion-img>                      
    </ion-card> 

2. after that set the style of the image

3. set image with and heigth to 100% in ion-img style

4. modify the value of radius in the ion-card component