How to get rounded corners on an Electron app?

Question

I am currently trying to get rounded corners on an Electron application I'm making. I have tried nearly every solution available on-line at the moment, but none of them make any difference.

How can I round the corners of my Electron app?

Adverse

Answer 1

Make a frameless transparent window

const myWindow = new BrowserWindow({
    transparent: true, 
    frame: false
})

And have something like this in the renderer, or apply the style directly to the body tag

<div style="width: 500px; height: 500px; border-radius: 5px">My window content</div>

Just make sure to also add a custom window titlebar that has -webkit-app-region: dragin order to make the window dragable from this element.

Check out the Electron Docs for further informations ;) https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#transparent-window

Gadroon

I had done this, for some reason it was not working with adding the radius to the body tag, instead I got it working using the transparent frame and just applying the radius to the title-bar div I was using. No idea why it wasn't working the way it says in their docs. – Adverse

I was having some trouble with this and it wasn't working because I had the dev tools opening. roll eyes – Civilized

div ok body not. – Maier

does not work with linux. check https://mcmap.net/q/905522/-transparent-windows-on-linux-electron – Dominick

Answer 2

For me, it worked that way:

const mainWindow = new BrowserWindow({
  width: 1360,
  height: 726,
  minWidth: 1360,
  minHeight: 726,
  frame: false,
  transparent: true,
  backgroundColor: '#00FFFFFF',
})

Premillennialism