Modal Border Bottom Radius

Ionic Framework
1

His guys,

I’m trying to alter the border-bottom-left and border-bottom-right radius of a modal.
Ionic --border-radius would change all 4 corners, but I just need the bottom ones.

Any idea how I could solve my problem?

Thanks for your help!

2

You can try below css properties.
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

3

Its not working. Thats why the modal component has its own variable --border-radius. But it will change all 4 corners.

4

I am also trying to change the Cornes of my modal window.

I am using --border-radius: 10px and that is changing all 4 corners on Android, but not on IOS.

Using the web inspector it looks like there is a different implementation for IOS as these are defined in the default stylesheet
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;

So I guess that ManOnMission is right but only on IOS, and you are right but only on Android

6

Did you found a way to do this correctly? I’m having the same problem. Need to edit only top borders…