Border-radius doesn't work on ion-toolbar on iOS

[Maged-Abdulrahman]

I applied a global style to ion-toolbar to make the background a defined blue color, and the bottom borders to be rounded.

Here’s the css for this.

ion-toolbar {
  border-radius: 0 0 20px 20px;
  --background: var(--ion-color-bgheader);
  color: white;
}

This seems to work just fine on Android devices. Here:

But on iOS, only the background and color properties work, but the bottom borders are not rounded as if the border-radius property isn’t recognized for ion-toolbar on iOS.

How can I solve this?

[csurja]

try to use parameter mode=“md” then you should get the same as you see on android.
don’t have to fight with ios.

if that is okay for you.

[Maged-Abdulrahman]

Thank you for your reply.

I already applied a global configuration for the entire app to be in Android mode.

Here:

 IonicModule.forRoot({
      mode: 'md'
 })

So this doesn’t seem to work as well unfortunately.

[swernimont-unanet]

I ran into this same issue. In my app I don’t set the mode in app.module.

<ion-toolbar class="toolbar" mode="md">

worked for me

[DibeX0]

Add „overflow: hidden“ into your ion-toolbar css.

[josemarsc-dev]

Probally a bug. Just tested here and worked fine (I’m using v6)