Applying Custom Rounded Corners to a macOS Window

Question

Created Oct ’24

Replies 4

Boosts 2

Participants 2

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.

Boost

Answer 1

Claude31 OP

Oct ’24

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 ?

0

Answer 2

rakic OP

Oct ’24

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.

1

Answer 3

Claude31 OP

Oct ’24

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

Do you mean the border of a usual window ?

0

Answer 4

rakic OP

3w

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.

1