具有边框半径和不同半径的元素无法正确呈现

我试图创建一个“标签”样的元素,其中边界的半径在左侧是不同的。

border-radius: 50px; /* for a completely rounded right side */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;

下面是一个非常简单的例子:

.tag {
  border-radius: 50px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: red;
  color: white;
  font-family: Helvetica, sans-serif;
}

<span class="tag">Jeanne Oliver</span>

View on JSFiddle

问题是:左边的两个角,我应该有3个圆角,看起来一点都没有圆角(见小提琴)

可能的起点 我注意到如果我把大半径缩小到 10-12px 问题停止显示。

但是我不明白 为什么? 这种情况正在发生,而且我还需要更大的数字,因为代码需要用于各种标记大小,并且不想为每个大小重写边界半径。