Change round css IONIC 4


#1

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;
    ....

#2

essayez

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

#3

I don’t need a border-radius of 50px, I need it with 5px


#4

what you want is that the radius of the red button is smaller is that?


#5

test this
in html

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

css

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