Lines are showing in Safari when using border-radius

Question

When using Safari (I'm on 14.0 but it shows up on other versions) and border-radius, I get these lines as show in the screenshot.

If I remove border-radius, the lines go away.

<div class="modal">
  <h3>Hello</h3>
  <p>some stuff</p>
</div>

body {  
  background-color: green;
}

.modal {
  border-top: 4px solid red;
  background-color: white;
  border-radius: 6px;
  padding: 15px;
}

Here is a JSBin to see it in action: https://jsbin.com/todumosoye/3/edit?html,css,output