Cocoa Mac Sheet Rounded Corners (Like Xcode 4)

Go To


Does anyone know how you can make a cocoa sheet with rounded corners like the image below?

Xcode 4 Rounded Sheet

Xcode 4 Sheet - Rounded Corners

I've looked all over but I cannot seem to find anything on it. I'm not sure if I'm looking in the wrong places, or if this just isn't a common practice. Any ideas?

2012-04-04 01:30
by Hunter Dolan
Have you tried looking at the NSPanel reference - CodaFi 2012-04-04 02:03
@CodaFi This doesn't have anything to do with NSPanel - Itai Ferber 2012-04-04 02:16
Added sample code to my answer - just wanted to let you know (leaving a comment will pop up a notification - just editing my answer won't) - Itai Ferber 2012-04-04 03:00
@Itai Ferber thank you very much! Everything works perfectly - Hunter Dolan 2012-04-04 03:03
Excellent, glad to have helped - Itai Ferber 2012-04-04 03:07
Updated my answer again with some new information. Thought you might want to know - Itai Ferber 2012-04-08 21:10


Edit: it turns out that this behavior is even easier if you're targeting OS X Lion or later - simply calling [sheet setOpaque:NO] is enough to enable rounded corners.

This behavior is pretty easy to reproduce. Initialize your sheet to be a transparent borderless window:

self.sheet = [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 300, 300) styleMask:NSBorderlessWindowMask backing:NSBackingStoreBuffered | NSTitledWindowMask defer:YES];
[self.sheet setOpaque:NO];
[self.sheet setBackgroundColor:[NSColor clearColor]];

Add as a subview a custom view:

[[self.sheet contentView] addSubview:[[IFWindowView alloc] initWithFrame:[[self.sheet contentView] frame]]];

That custom view should do its drawing as follows:

#define RADIUS 5.0
NSBezierPath *bezierPath = [NSBezierPath bezierPathWithRoundedRect:NSMakeRect(self.bounds.origin.x, self.bounds.origin.y + RADIUS, self.bounds.size.width, self.bounds.size.height) xRadius:RADIUS yRadius:RADIUS];
[[NSColor windowBackgroundColor] set]; // In production, use the appropriate color with alpha for transparency.
[bezierPath fill];

Here is some sample code to demonstrate this in action:

2012-04-04 02:15
by Itai Ferber
NOTE: For NSAlerts you can also use the above edit. [alert window] setOpaque:NO] Hope this helps someone - Hunter Dolan 2012-04-12 01:05


So far as I can tell, this is a property of the window. If it is a panel, it has square corners, if a window, round corners. At least that's what happens under Mac OS - can't vouch for iOS.

2012-04-04 01:43
by DRVic