I know you can use `border-radius` to round objects with CSS, but I am trying to figure out how to round, or possibly hide, the pointed parts of a CSS shape when overlaying over a circle:

It's tough to explain without a Codepen:

<http://codepen.io/cavanflynn/pen/gpEdJo>

```
#circle:before { 
  position:absolute;
  left: -10px;
  top: -25px;
  z-index: 100;
  content: "";
  border-right: 35px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid transparent;
}

```

In the Codepen you can see the circle and where parts of the white are overflowing the red boundary of it. The goal is to get rid of the white points and round the white perfectly with the red OR make the section of the circle that the white overlays completely transparent (like taking a slice from a pizza).