Applying Custom Rounded Corners to a macOS Window

Which method allows me to apply larger-than-default rounded corners to a macOS window while maintaining the system’s dynamic, contrasting border – similar to what’s seen in the Control Center popup? (Control Center has a corner radius of 16, the default system window is 10.)

While I know how to closely achieve this effect manually for my plain panel, I'd like to leverage the built-in method and get it for free from the OS.

I’ve spent way more time on this problem than I'm willing to admit, and searched extensively, but haven’t found any solution. I’d really appreciate any pointers.

Thank you.

Answered by rakic in 809332022

I’ve reverse engineered the macOS inner rim stroke color used for windows, popovers, menus, etc., and the value appears to be …

Color(red: 26 / 255, green: 26 / 255, blue: 26 / 255).blendMode(.plusLighter)

… which corresponds to the NSColor.gridColor value in dark mode.

In usage:

.background(.ultraThinMaterial.materialActiveAppearance(.active))
.overlay {
  RoundedRectangle(cornerRadius: 16)
    .strokeBorder(Color(red: 26 / 255, green: 26 / 255, blue: 26 / 255)
      .blendMode(.plusLighter))
}

I hope this will be of use to someone in the future.

This should give a solution: https://stackoverflow.com/questions/42762856/nswindow-with-round-corners-in-swift

let effect = NSVisualEffectView(frame: NSRect(x: 0, y: 0, width: 0, height: 0))
effect.blendingMode = .behindWindow
effect.state = .active
effect.material = .dark
effect.wantsLayer = true
effect.layer?.cornerRadius = 15.0
window.contentView = effect
window.titlebarAppearsTransparent = true
window.titleVisibility = .hidden
window.isOpaque = false
window.backgroundColor = .clear

Does it ?

In essence, I would be grateful if those in the know could provide me with the precise name of the color, material, or blend mode value employed for the border.

precise name of the color, material, or blend mode value employed for the border.

Do you mean the border of a usual window ?

Accepted Answer

I’ve reverse engineered the macOS inner rim stroke color used for windows, popovers, menus, etc., and the value appears to be …

Color(red: 26 / 255, green: 26 / 255, blue: 26 / 255).blendMode(.plusLighter)

… which corresponds to the NSColor.gridColor value in dark mode.

In usage:

.background(.ultraThinMaterial.materialActiveAppearance(.active))
.overlay {
  RoundedRectangle(cornerRadius: 16)
    .strokeBorder(Color(red: 26 / 255, green: 26 / 255, blue: 26 / 255)
      .blendMode(.plusLighter))
}

I hope this will be of use to someone in the future.

Applying Custom Rounded Corners to a macOS Window
 
 
Q