How to get rounded corners on an Electron app?

In Electron applications, achieving rounded corners typically involves two main aspects: CSS styling and Electron window configuration. Here are the specific steps and examples:

1. Electron Window Configuration

First, ensure that when creating the Electron BrowserWindow, the window is configured as frameless. This can be achieved by setting the frame property to false. This removes the default window border from the operating system, enabling custom designs such as rounded corners.

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

function createWindow() {
  // Create a frameless window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // Set frameless
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

2. CSS Styling

After removing the default window border, you can implement rounded corners using CSS. This is done by setting the border-radius property on the HTML or body elements.

Assuming your Electron application loads an index.html file, add the following styles to the corresponding CSS file:

css
html, body {
  height: 100%;
  margin: 0;
  border-radius: 15px; /* Rounded corners setting */
  overflow: hidden; /* Hide overflow content */
}

body {
  background: #FFF; /* Background color */
  border: 1px solid #ccc; /* Border setting (optional) */
}

3. Consider Platform Compatibility

Note that some operating systems may not fully support CSS rounded corners, especially at the window borders. In such cases, consider using additional tools or libraries for improved results, or perform platform-specific optimizations.

4. Example

Assume you are developing a simple note-taking application; set up the window and styles as described above. When users open the application, they will see a rounded window containing a text editing area.

By doing this, you can provide a more modern and appealing user interface for Electron applications while maintaining a good user experience.

This covers the basic steps and examples for achieving rounded corners in Electron applications.