Why does Safari show these small white display artifacts?

I'm developing a React app and I've built a panel object with a bit of css. Note in the first screenshot there are little white lines that show up just inside the border. I've included the html, css, and some screenshots. The artifacts show up in Safari. They do not show up in Chrome, Firefox, or Opera. I'm working on checking IE and Edge.

<div className='panel-wrap'>
    <div className='panel-header'>
        Reserves
    </div>
    ...panel content...
</div>

.panel-wrap {
  padding-top: 10px;
  border-radius: 2px;

  .panel-header {
    position: relative;
    background: var(--app-theme-base);
    border-radius: 2px 2px 0 0;
    padding: 10px 0 10px 10px;
    color: white;
  }
}

Screenshot From Safari

Screenshot from Brave (Chromium)

It's possible this is a common issue that has been solved, I just wasn't sure what to Google to get to the right solution.