CODEWITHSUNDEEP
javascriptcsselectron
Matteo Piatti
Matteo Piatti

Reputation: 363

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.

Upvotes: 5

Views: 3889

Answers (3)

Dan Dinh
Dan Dinh

Reputation: 8629

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:  {}
        });

Upvotes: 4

desko27
desko27

Reputation: 1736

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, // 👈
})

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

Upvotes: 3

Matteo Piatti
Matteo Piatti

Reputation: 363

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

Upvotes: 1

Related Questions