Element with border-radius and different radii does not render properly

Question

I'm trying to create a "tag"-like element where the radii of the borders are different on the left side.

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

Here's a very brief example:

.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

The problem: the two corners on the left, where I should have 3px rounded corners, don't seem to have any rounding at all (see it in the fiddle)

Possible starting point I've noticed that if I reduce the larger radius to something like 10-12px the issue stops manifesting.

However I don't understand WHY this is happening, and also I need the larger number because the code needs to be used on a variety of tag sizes and don't want to rewrite the border-radius for each size.

This might be relevant: "Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap..." --w3.org. Also see the information at Border-radius in percentage (%) and pixels (px) or em. — showdev

Cristian Scorteanu Cristian Scorteanu · Accepted Answer · 2018-05-22T08:01:24

This happens when 2 adjacent corners exceed the size of the border box (in your case it's 50px top-right and 50px bottom-right, which exceeds the element's dimenions) and the browser has to scale down all border radius until they won't intersect.

More details on www.w3.org - corner-overlap and a better exemplification here (Lea Verou, "The Humble Border-Radius")

Element with border-radius and different radii does not render properly

2 Answers