Electron window corners without radius?

I have an electron window with these properties:

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  title: "Aqua",
  frame: false,
  transparent: true,
  show: false,
  fullscreenable: false,
  webPreferences: {
    plugins: true
  }
})

When I start it, everything works fine. But because my titlebar only shows on hover, I have an ugly edge on top and rounded edges on the bottom. I now want all of my corners to have a 0px radius. According to other resources on the Internet, it should automatically be 0px radius when the window is frameless and transparent. This does not work for me. How can I make my edges sharp with no radius on the whole window?

If you need my code, here is my CSS, here my main.js and here my HTML.

Answer

Okay so I have found a hacky little workaround:

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


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

This is hacky but the only way I found that worked. If you have a better way please still let me know!

You probably shouldn’t use this. It may mess up everything!

Better solution: Just set a vibrancy and a transparent true in the creaton of the BrowserWindow, your window will be with hard edges. everything else will need to have a deep knowledge of chromium…