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

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.

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.

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

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

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

Ionic Framework Ionic Angular

DibeX0 February 24, 2022, 12:32am 5

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

How to create rounded border on bottom of ion-toolbar/ion-header

Topic		Replies	Views
How to create rounded border on bottom of ion-toolbar/ion-header Ionic Framework	2	4199	March 10, 2022
Border-radius not working on IOS Ionic Angular	0	1074	November 11, 2020
Modify ion-toolbar Ionic Framework	0	465	September 15, 2020
How to remove toolbar border in Ionic 5? ionic-v3	5	5197	July 29, 2023
CSS Issue with Ion-tab-bar and ion-content issue - iOS build Ionic Angular	2	3747	June 3, 2024

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

Related topics