Ion-button --border-radius not work

Ionic Framework
1

Hi!

I want to change border radius of ion-button, but it’s not work… I inserted this code into global.scss:

ion-button {
–border-radius: 15px;
}

What is the problem? Thank you!

“@ionic-native/core”: “^5.19.1”,

2

Is with two -

 ion-button {
 --border-radius: 15px;
 }
3

That is two -, just editor… So I used two -, but not work.

4

Add !important

--border-radius: 15px!important;

5

I already tried it, not work…

Aaaaaand it’s not work too… yeah…

ion-item {
--border-width: 0;
}

Névtelen-3

6

You wrote asking for help to ion-button but you share here ion-item :slight_smile:

What you need to make? Button with border-radius?
Share you html code of you element, or write more information about what you need to make.

7

ion-button border-radius and ion-item border-width

ion-button params: color=“success” expand=“full” size=“large”
ion-item is just a simple ion-item

none of them work

8

Try using !important.

ion-item{
--border-width:10px!important;
}

Share you html code of you element. for example

<ion-item color="warning" class="btitle2" *ngIf="i.productos==null">
   <ion-label (click)="dat=!dat">
     {{i.descripcion}}
   </ion-label>
   <span class="vermas_genericos" (click)="genericos(i)">
     ver mas&nbsp; <ion-icon name="arrow-round-forward"></ion-icon>
   </span>
 </ion-item>

that to be able to understand a little more because it doesn’t work for you to see if that’s how you have it organized

9 
ion-menu {
	ion-content {
		ion-item {
			text-transform: uppercase;
			font-size: 0.9em;
			font-weight: 500;
			--border-width: 0 !important; // just this is what not work
		}
	}
}

<ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item *ngIf="p.auth === undefined || p.auth === null || isAuthenticated == p.auth" (click)="onClickMenu(p)">
              <ion-icon slot="start" [name]="p.icon" color="primary"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

And the button:

ion-button {
	--border-radius: 10px;

<ion-button color="success" expand="full" size="large" (click)="onLoginSelect()">
      Login
    </ion-button>
10

Look this.

try with 0px

Sin título
Sin título1316×656 64 KB

11

Hmm… How can I hide that line?

12

I think button with expand=“full” is not edited by border-radius.

13

What line? of the ion-item ?

14

Yes:
Névtelen-3

15

That is a --inner-border-width

try this.

ion-item{
--inner-border-width:0px!important;
}
16

Thank you!

The ion-button border-radius works with expand=“block”
Just with expand=“full” not works

Thanks for help!

2 Likes
17

Ye i told you that.

Don’t forget mark to solve.

You are welcome.

2 Likes
18

thank you :slight_smile: strangely --border-radius doesn’t work with expand="full"