Change Round css in IONIC 4

Question

I have a button with shape round as follows:

<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>

The class shadow-red is:

.shadow-red{
    box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
    border-radius: 5px;
}

And the result is:

So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.

.round{
  border-radius:5px!important;
}

I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.

I have also tried to add to variables.css the following lines and none of them worked:

--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....

Answer 1

Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.

<ion-button expand="block" class="shadow-red">Signup with</ion-button>

Use the following CSS custom properties as described in the Ionic 4 docs.

.shadow-red{
    --border-radius: 5px;
    --box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}

Result: