How to remove border of the navigationBar?
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
On iOS, the "border" under a navigation bar is usually its shadow line, not a normal border property. Removing it depends on which appearance API you are using: the modern UINavigationBarAppearance API on iOS 13 and later, or the older shadowImage and background-image tricks on earlier versions.
The most reliable fix in modern apps is to set the navigation bar appearance explicitly and clear the shadow color. If you only remove one appearance state and forget the others, the line often comes back when the scroll state changes.
Remove the Bottom Line with UINavigationBarAppearance
For iOS 13 and later, configure a navigation bar appearance and set shadowColor to .clear:
That removes the hairline for normal, scroll-edge, and compact states. Using all three assignments matters because the bar can switch appearance depending on large titles, scrolling, and size class.
If you want a transparent bar instead of an opaque one, start with:
Older Approach for Legacy iOS Code
Before UINavigationBarAppearance, developers commonly removed the line like this:
That still appears in older codebases, but in modern iOS projects the appearance API is the cleaner and more complete solution.
Global Versus Per-Screen Styling
If every screen should remove the border, you can apply the appearance through the appearance proxy:
If only one screen needs the border removed, configure the specific navigation controller or update the appearance in that screen's lifecycle methods.
One practical detail is timing. If a controller later replaces the navigation bar appearance in viewWillAppear, it can undo your earlier border removal. When styles seem inconsistent across screens, look for multiple places that assign navigation bar appearance rather than assuming the original code failed.
Why the Border Sometimes Comes Back
A frequent source of confusion is that the line disappears on one screen and reappears while scrolling. That usually happens because:
- '
standardAppearancewas set, butscrollEdgeAppearancewas not' - a different controller later overwrote the appearance
- the app mixes legacy
shadowImagecode with the newer appearance API
This is why a complete appearance configuration is more reliable than one-off tweaks.
Common Pitfalls
- Clearing only
standardAppearanceand forgettingscrollEdgeAppearance. - Mixing
shadowImagehacks withUINavigationBarAppearancein the same code path. - Applying a global appearance when the design requirement was screen-specific.
- Forgetting that large-title navigation bars often use the scroll-edge appearance.
- Debugging "border" styling as if it were a CSS-like border when it is really the navigation bar shadow line.
- Updating one controller's bar appearance and expecting it to survive a later navigation-controller-wide override.
Summary
- The visible line under a navigation bar is usually its shadow, not a normal border.
- On modern iOS, remove it by setting
shadowColor = .clearon aUINavigationBarAppearance. - Configure
standardAppearance,scrollEdgeAppearance, andcompactAppearancetogether. - Older codebases may use
shadowImageand empty background images, but the appearance API is preferred now. - If the line comes back while scrolling, check which navigation bar appearance state is active.
- Test transitions carefully.

