Electron window corners without radius?

Question

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.

Lazes

what did u mean without radius? – Organo

I made this image to explain it simply. i hope you understand: here – Lazes

by default windows have sharp edges?? what os are u on? – Organo

yeah I'm on mac. On windows default is sharp edges, on mac they are rounded. – Lazes

damn wish it was the other way around – Organo

Answer 1

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...

Lazes

Answer 2

Starting from version 13, Electron has a new BrowserWindow option called roundedCorners which can be disabled by setting it to false:

const window = new BrowserWindow({
  title: 'A window without rounded corners',
  roundedCorners: false, // 👈
})

• See all BrowserWindow options
• See the original Pull Request

Make sure you are running version 13 of Electron or newer (check it: npm ls electron). If not, install the latest one: npm i electron@latest

Acrospire

electron 28, windows 11: roundedCorners:false is not working, even with frame:false. The 4 corners are still rounded – Polysepalous

as in doc, it's for macOS only: electronjs.org/docs/latest/api/browser-window – Polysepalous

Use frame:false together with thickFrame:false should work – Polysepalous

Answer 3

Use frame:false, together with thickFrame:false should work on Windows. Use additional roundedCorners:false for macOS:

const Win = new BrowserWindow({
            frame:           false,
            roundedCorners:  false, // macOS, not working on Windows
            thickFrame:      false,
            webPreferences:  {}
        });

Polysepalous