I'm building a HTML template which looks something like [this](https://i.stack.imgur.com/PeJ68.png). I can do this with an svg background, but I'm trying to build this with pure CSS.

Here's what I implemented till now. How to get rid of the sharp edges of rectangle around the cirle? Thanks in advance.

```css
.parent {
  --parent-size: 150px;
  width: var(--parent-size);
  height: var(--parent-size);
  background: red;
  position: relative;
  margin-top: 50px;
}
.child {
  --circle-size: 70px;
  width: var(--circle-size);
  height: var(--circle-size);
  background: green;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -35px;
  border: 3px solid white;
}
```

```html
<div class="parent">
  <div class="child"></div>
</div>
```

Target:

[![enter image description here](https://i.stack.imgur.com/bNgKp.png)](https://i.stack.imgur.com/bNgKp.png)