html - Firefox 与 Chromium 上边框/边框半径的不同结果

Question

我正在使用以下 CSS 生成非常简单的 2d 河流形状：

.river-left {
  width: 100px;
  height: 50px;
  border: solid 20px rgb(0, 140, 255);
  border-color: rgb(0, 140, 255) transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(270deg);
  align-self:center;
  margin-top: 19px;
}

.river-right {
  width: 100px;
  height: 50px;
  border: solid 20px rgb(0, 140, 255);
  border-color: rgb(0, 140, 255) transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(90deg);
  align-self: center;
  margin-top: 19px;
}

<div class="river-left"></div><div class="river-right"></div>

在 Firefox 中，下面的 HTML<div class="river-left"></div><div class="river-right"></div>会生成如下图所示的形状：

但在 Chromium 中，它看起来完全不同（更糟）：

我尝试使用 -webkit-properties 来解决这个问题，但我不知道该怎么做。我意识到制作这些形状的更传统方法是使用 SVG。我想我可能会改用 SVG（尽管这只是一个想法的快速模型）但是很高兴知道如何解决这种差异。