Remove Border Radius From Frameless Window On Mac

[Subash]

Fameless window on mac contains border radius on both top and bottom, is there any option to remove that ?

[keehun]

I think it looks good with the border. I've seen apps without that border and it just feels off/fake/not-native.

[Subash]

I am asking for an option, I also do not recommend to disable that completely.

[zcbenz]

The problem is it is actually quite hard to remove the bottom rounded corners, there is an upstream bug tracked at:
https://code.google.com/p/chromium/issues/detail?id=355412

[captbaritone]

Looking to use Electron to build an OSx version of https://github.com/captbaritone/winamp2-js, but I would need to be able to turn off rounded corners for it to look good.

Seems like it might not be a solvable problem, but I wanted to add another example where non-rounded corners might be useful.

[andrewrobinson5]

I'm actually having the exact opposite problem. I would like the corners to round on windows and linux. Can anybody help me out?

[mikaa123]

A hack that I used to remove the rounded border was to make the window transparent, then use a css clip-path property.

[kevcjones-archived]

A bit of a bump but wondering if anyone found a non-hack way of doing this?

[gabrielstuff]

@mikaa123 how do you handle the click through the transparent window ? A real life example of border radius issue is when you want to display content on a video projector or a LED screen or any other projector.
Real life example, you want a frameless window in 500x500 and you have 10 of them.
You think you will simply start a script to place each window side by side and let the app start.
Well, no you can't, you are forced to put all of your app in one application and manage your tiled window inside one app. This sucks : /

[mikaa123]

@gabrielstuff I don't it's possible to let a click go through a window, even if it's transparent

[ivmelo]

Is there a way to remove only the top rounded corners? I am building a tray app and it kinda looks off with the top rounded corners.

[brockb]

I really need square corners as well. I'm doing screen capture of a video in a chromeless window, let's say placed at X=0, Y=0, and the screen capture is picking up those rounded corners. I need to be able to capture every pixel of the video (including the missing pixels in the corners). There has to be a way to make it where border radius can be set. I really need a radius of zero.

[MondoGao]

Leave the corners away!
You can get a radius-less window-like window by:

  win = new BrowserWindow({
    frame: false, 
    transparent: true,
  });

html {
  width:  /* less then window's size */;
  height: /* the same */;
  background: /* some color here */;
}

It's a little hack though. But it works well~

[natew]

@MondoGao this hack doesn't work if you're doing a full-screen app or one that docks to the side of the screen.

Here's a quick example:

Seems impossible to remove the border there, though the design would look much better without it. You can't indent it there because you want it to be flush with the sides.

[codebytere]

Given that there exist workarounds, this is something that isn't on our current roadmap and which I am thus goin to tag as wontfix.

[andrienko]

Sadly, these "workarkounds" do not work for me on High Sierra. Kinda shame.

[gcxfd]

i do it

frame: false # 无边框
minimizable: false
maximizable: false
closable:false
titleBarStyle: 'customButtonsOnHover' # 让mac不是圆角边框

[zcbenz]

I'm reopening this issue since there is an easy way to do that on newer versions of macOS.

[greggsdavis]

@zcbenz What is the easier way to remove rounded corners in newer versions of macOS?

[zcbenz]

Applying NSFullSizeContentViewWindowMask style on the window can remove the rounded corners, and I'm adding a new option for it.