Ion-button --border-radius not work

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”,

Is with two -

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

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

Add !important

--border-radius: 15px!important;

I already tried it, not work…

Aaaaaand it’s not work too… yeah…

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

Névtelen-3

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.

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

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

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>

Look this.

try with 0px

Hmm… How can I hide that line?

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

What line? of the ion-item ?

Yes:
Névtelen-3

That is a --inner-border-width

try this.

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

Thank you!

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

Thanks for help!

Ye i told you that.

Don’t forget mark to solve.

You are welcome.