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

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?

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.

1 Like

Thank you for your reply.

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


      mode: 'md'

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

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

1 Like

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

1 Like

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