How to make corners rounded in electron app

Question

const electron = require("electron");
const {app, BrowserWindow, globalShortcut} = electron;
const path = require("path");

function createWindow(){
    win = new BrowserWindow({
        width: 1000, 
        height: 750, 
        icon: path.join(__dirname,'\checked.png'),
        frame: false,
        fullscreenable:false,
        // radii: [5,5,5,5],
        // transparent:true

    });

    win.loadFile('mainWindow.html')
    win.setMenu(null);
}

Always has a white border gap on corners, making it rectangular.

Have attempted to increase border size of css but everything expands.

Answer 1

Crucial properties for this are: frame: false and transparent: true (you missed the latter)

js

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

app.once('ready', () => {
  let win = new BrowserWindow({
    frame: false,
    transparent: true
  })
  win.loadURL(path.join(__dirname, '/roundedcorner.html'))
})

html

<html>
  <body>
      <p style="border-radius: 25px; background: #73AD21; height: 300px;"></p>
  </body>
</html>

How to make corners rounded in electron app

Question

1 answers

solution1
1 ACCPTED 2018-08-28 07:17:33

How to make corners rounded in electron app

Question

1 answers

solution1 1 ACCPTED 2018-08-28 07:17:33

solution1
1 ACCPTED 2018-08-28 07:17:33