Corner radius for a navigation bar

Question

i have developed an iPad app. In that app i have 4 separate views embedded inside a single view controller and there is a navigation bar for each view.I want to set the corner radius of each navigation bar.

i tried

       customNavigationBar.layer.cornerRadius = 25;

but this piece of code is not working. Does anyone know how to set the corner radius for each navigation bar.

score 21 · Accepted Answer · edited May 25 '12 at 17:36

21

customNavigationBar.layer.cornerRadius=25;
customNavigationBar.clipsToBounds=YES;

i have tested it successfully

edited May 25 '12 at 17:36

iwasrobbed

46,496
21
150
195

answered Mar 14 '12 at 12:17

hayden

293
1
5

2

This solution doesn't work well if you have background colour set and wish to keep status bar in the same colour. clipsToBounds prevents UINavigationBar from covering status bar, it ends on safe area. – Andrzej Polis Jan 05 '21 at 17:48

score 13 · Answer 2 · answered Mar 28 '18 at 14:05

13

Swift 4: Also if you only want the top edges of the navigation bar to have rounded corners, you can try this

override func viewDidAppear(_ animated: Bool) {
    self.navigationController?.navigationBar.layer.cornerRadius = 20
    self.navigationController?.navigationBar.clipsToBounds = true
    self.navigationController?.navigationBar.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
}

answered Mar 28 '18 at 14:05

Naishta

11,885
4
72
54

Hi, this is not working on Swift 4. Nothing happened to it. Sure it worked? – Daniel Arantes Loverde Jun 16 '18 at 01:20
1

This is for iOS 11 onwards, which version are you checking with. worth checking this answer for iOS 10 and below https://stackoverflow.com/a/49731708/5438240 – Naishta Jun 16 '18 at 21:44
Thanks @Naishta, I was trying to round out the NavigationBar only, but I completely forgot that I use the NavigationBar under the TabBar !! So it never got round. Now it's rounded :) Thanks for your message !! Helped me shift focus to TabBar! – Daniel Arantes Loverde Jun 17 '18 at 12:26
This cuts navigationBar in half – Vladimir Sukanica Apr 06 '22 at 08:48

score 2 · Answer 3 · edited May 23 '17 at 11:46

2

Add an image with corner rounded as background of navigation bar to make it happen. Check this link Applying rounded corners for the whole application

edited May 23 '17 at 11:46

Community

1
1

answered Mar 14 '12 at 10:36

Neo

936
6
17

score 1 · Answer 4 · edited May 25 '12 at 17:36

1

add quartcore framework and than

in .h file of header

#import <QuartzCore/QuartzCore.h>

and write code as below

self.navigationController.navigationBar.layer.cornerRadius=25;

edited May 25 '12 at 17:36

iwasrobbed

46,496
21
150
195

answered Mar 14 '12 at 11:05

hayden

293
1
5

Corner radius for a navigation bar

4 Answers4