Can't make rounded corners

Question

I'm using Electron React Boilerplate and i'm trying to make beautiful rounded corners but instead i'm getting white square corners. Do someone know any solution?

This is what my app corners looks like

This is my BrowserWindow code:

mainWindow = new BrowserWindow({
  show: false,
  width: 396,
  height: 520,
  transparent: true,
  frame: false,
  resizable: false,
  webPreferences: {...preferences}
});

Edit: Here is more code

import React from 'react';
import styles from './Home.css';
import Titlebar from './FirstOpenScreen/Titlebar';

export default function Home(): JSX.Element {
  return (
    <div className={styles.home}>
      <Titlebar />
      <h1 className={styles.h1}>Hello, world.</h1>
    </div>
  );
}

And my CSS:

div.home {
  width: 100%;
  height: 100vh;
  background-color: #252525;
  color: white;
  border-radius: 10px;
  overflow: hidden;
}

Answer 1

Thanks everyone for the help. I was analyzing my own code and tried a CSS property that I saw on the internet, and it ended up helping me.

The solution is simply to add overflow: hidden to the CSS file to work.

body {
  border-radius: 10px;
  overflow: hidden;
}