Change round css IONIC 4

Ionic Framework ionic-v3
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;
}
6

Hello, according to the documentation you should use in your css the property “–border-radius” instead of the well known “border-radius”.

So, the class should be:

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

In case some one is still facing this issue.
Just use --box-shadow instead of normal box shadow

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