Ion-button --border-radius not work


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;


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.


Share you html code of you element. for example

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

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

And the button:

ion-button {
	--border-radius: 10px;
<ion-button color="success" expand="full" size="large" (click)="onLoginSelect()">

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 ?


That is a --inner-border-width

try this.


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.


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