Transparent window issues when using rounded corners


#1

I have started playing around with transparent windows so I can create my own forms. After setting up a basic test, I noticed that the bottom radius and shadow show up just fine but the top radius show with white. I have been looking around and see this was an issue early on and its been fixed but im having the issue and was hoping someone could show me how to fix it.

The below picture shows the top of the form and you can see the white corners.

Below is my Code for the app and the html

const {app, BrowserWindow} = require('electron');

let win;

function createWindow () {
  win = new BrowserWindow({transparent: true, frame: false});
  win.loadURL(`file://${__dirname}/app.html`);

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
        <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css" />

        <style>

            body{
                border-radius: 2px;
            }

            .skin-blue .wrapper {
                background-color: #E8E8E8;
            }
            .skin-blue .titlebar {
                background-color: #145374;
                color: white;
            }
            .skin-blue .titlebar a {
                color: white;
            }
            .skin-blue .titlebar a:hover {
                color: #5588A3;
            }
            .skin-blue .titlebar a:active {
                color: #00334E;
            }
            .skin-blue .titlebar a:visited {
                color: white;
            }

            .wrapper {
                height: 500px;
                width: 300px;
                border-radius: 2px;
                box-shadow: 2px 2px 5px #17202A;
            }

            .wrapper .titlebar {
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
                height: 32px;
            }

            .wrapper .titlebar p {
                float: left;
                padding-left: 5px;
                margin: 0;
            }

            .wrapper .titlebar a {
                padding-top: 8px;
                float: right;
                padding-right: 5px;
                text-decoration: none;
            }

        </style>
    </head>
    <body class="skin-blue">

        <div class="wrapper">    
            <div class="titlebar">
                <p>Title</p>
                <a class="fa fa-times" aria-hidden="true"></a>
            </div>
        </div>

    </body>
</html>

#2

So I found my resolution