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;
}

I have never worked with electron but understanding that it uses javascript HTML and CSS, there is a CSS property called `border-radius` for rounding corners. — ISAE, Jul 14 '20 at 01:26
Hello, I have already tried to use `border-radius` on my JSX element but this didn't worked. The white squared borders on the image was my attempt to use `border-radius`. — andrrms, Jul 14 '20 at 01:28
Welcome to StackOverflow! It is helpful for us to see as much code as possible in order to best help. Are you able to provide a snippet of the full code, or the CSS you are using? — nihiser, Jul 14 '20 at 01:33

score 0 · Answer 1 · answered Jul 14 '20 at 02:03

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;
}

Can't make rounded corners

1 Answers1