How to get a frameless window with border radius?


#1

I’m on Arch linux and this just doesn’t seem to work for me.

This is my BorwserWindow definition:

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    transparent: true
  });

And this is the file I’m testing with:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css" media="all">
        html { border-radius: 10px; }
        body { background: #FFF; }
        </style>
    </head>
    <body></body>
</html>

Seems no matter what variation of the above I try the window does not have border radius. What am I missing?


#2

I couldn’t get border-radius to work with html or body elements in Chrome browser either. As a work-around you could add an element inside body with the desired background and border-radius.


#3

Also on Linux you need to include the command line parameters --enable-transparent-visuals --disable-gpu to prevent body and html elements from having a white background. http://electron.atom.io/docs/latest/api/frameless-window/#limitations


#4

That was the missing ingredient. Thanks @john!