How to get a frameless window with border radius?


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>
        <meta charset="UTF-8">
        <style type="text/css" media="all">
        html { border-radius: 10px; }
        body { background: #FFF; }

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


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.


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.


That was the missing ingredient. Thanks @john!