Ion-grid css -webkit-mask

Ionic Framework
1

I’m trying to apply the same css mask on all 4 corners of a ion-grid, but without success.
It works but only for 1 corner at a time.

This css is working for top left corner:

ion-grid {
background-color: black;
padding: 0%;
-webkit-mask:
radial-gradient(circle 10px at top left, transparent 0, transparent 20px, black 21px);
}

Clipboard

If I change from “top left” to “bottom left”, it still works (of course, u’ll say).
But I’m not able to apply it multiple times and repeat on each corner.

I tried to repeat it in different ways but never works

-webkit-mask:
radial-gradient(circle 10px at top left, transparent 0, transparent 20px, black 21px);
-webkit-mask:
radial-gradient(circle 10px at bottom left, transparent 0, transparent 20px, black 21px);

// 2nd override 1st, as expected

-webkit-mask:
radial-gradient(circle 10px at top left, transparent 0, transparent 20px, black 21px) top,
radial-gradient(circle 10px at bottom left, transparent 0, transparent 20px, black 21px) bottom;

// Stop working

-webkit-mask:
radial-gradient(circle 10px at top left, transparent 0, transparent 20px, black 21px),
radial-gradient(circle 10px at bottom left, transparent 0, transparent 20px, black 21px);
;

//Stop working

Using -webkit-mask-image → same results

I tried also with different classes

ion-grid.tl {
-webkit-mask:
radial-gradient(circle 10px at top left, transparent 0, transparent 20px, black 21px);
}
ion-grid.bl {
-webkit-mask:
radial-gradient(circle 10px at bottom left, transparent 0, transparent 20px, black 21px);
}

but always only one works.
It makes sense that only one “-webkit-mask” instruction works,but I’m not able to provide multiple info,
I tried also with parenthesis but I’m stuck :unamused:

Thanks for any suggestions