Safari浏览器中CSS绘制半圆的兼容问题及更优方案咨询

我用以下CSS代码绘制半圆，在Chrome中显示正常，但在Safari里会出现图形错误（底部边框与左右边框衔接处渲染异常）：

<!DOCTYPE html>
<head>
  <style>
    .semiCircle {
      width: 200px;
      height: 100px;
      border-radius: 50% / 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border: 3px solid black;
    }
  </style>
</head>
<body>
  <div class="semiCircle"/>
</body>

我发现移除任意一条边框就能消除这个渲染错误，比如去掉底部边框后显示就正常了。

目前我采用的解决方案是不绘制底部边框，通过额外容器元素手动添加底部边框，代码如下：

<!DOCTYPE html>
<head>
  <style>
    .semiCircleContainer {
      width: 206px;
      height: 103px;
      border-bottom: 3px solid black;
    }
    .semiCircle {
      width: calc(100% - 6px);
      height: calc(100% - 3px);
      border-radius: 50% / 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-left: 3px solid black;
      border-right: 3px solid black;
      border-top: 3px solid black;
    }
  </style>
</head>
<body>
  <div class="semiCircleContainer">
    <div class="semiCircle"/>
  </div>
</body>

请问有没有更优雅的解决方案来解决这个问题？

内容的提问来源于stack exchange，提问作者Ekos IV