不同边框宽度和颜色的边框半径，Safari 渲染问题

Question

我想创建一个只有左右边框和所有角都有半径的盒子。边框也应该有不同的颜色。

在 Chrome 中，除了细小的白色边缘之外，角点都可以正确显示。

然而，在 Safari 中，似乎存在渲染问题，这在左边框上尤其明显。半径被切断，但右边框的颜色在左侧可见为一条直线。 （这是正确的边框颜色，改变颜色就可以看到。

我创建了 2 个屏幕截图和一个 CodePen。

https://codepen.io/Regnalf/pen/rNPPovV

HTML：

<article>
  <div class="t">Box</div>
  <div class="c">Content</div>
</article>

CSS：

body
{
  background-color: #eee;
}

article
{
  background-color: white;
  width: 10em;
  
  border-radius: 1em;
  overflow: hidden;
  
  border-left: 5px solid #00aaa1;
  border-right: 5px solid #005b74;
}

.t
{
  color: white;
  background-image: linear-gradient(90deg, #00aaa1, #005b74);
}

.t, .c {padding: 0.5em;}

这是否有可能在 Safari 中也能正确呈现？如果 Chrome 中的细白线也消失了，那就完美了！

Answer 1

也许尝试这样的事情？：

article {
  width: 10em; 
  border-radius: 1em;
  overflow: hidden;
  background-image: linear-gradient(90deg, #00aaa1, #005b74);
  background-repeat:no-repeat;
  padding-left:5px;
  padding-right:5px;
}
.t {
  color: white;
}
.t, .c {padding: 0.5em;}
.c {
  background-color: white;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
}