Элемент с границей радиуса и различными радиусами не отображает должным образом

Question

Я пытаюсь создать элемент типа тега, в котором радиусы границ на левой стороне различны.

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>

Вид на JSFiddle

Проблема: два угла слева, где у меня должны быть 3px закругленные углыкажется, что вообще нет никакого округления (см. это в скрипке)

Возможная отправная точка Я заметил, что если я уменьшу больший радиус до чего-то вроде 10-12pxпроблема перестает проявляться.

Однако я не понимаю, ПОЧЕМУ это происходит, а также мне нужно большее число, потому что код должен использоваться для тегов различных размеров ине хочу переписывать границы радиуса для каждого размера.

Answer 1

Это происходит, когда 2 соседних угла превышают размер рамки (в вашем случае это 50px в верхнем правом углу и 50px в нижнем правом углу, что превышает размеры элемента), и браузер должен уменьшить all радиус границы, пока они не пересекаются.

Подробнее о www.w3.org - угловое перекрытие и лучшая иллюстрация здесь (Леа Веру, "Скромный радиус-радиус")

Answer 2

левый радиус применяется, ничего не происходит неправильно - вы можете проверить его, установив display: inline-block; height: 200px; в span.3px очень маленький радиус, чтобы сделать видимый эффект на ваш оригинальный размер пролета.