CODEWITHSUNDEEP
htmlcss
Tibi Neagu
Tibi Neagu

Reputation: 401

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

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.

Upvotes: 2

Views: 614

Answers (2)

Cristian Scorteanu
Cristian Scorteanu

Reputation: 36

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")

Upvotes: 2

IP_
IP_

Reputation: 695

left radius is applied, nothing is going wrong - you can check it by setting display: inline-block; height: 200px; to span. 3px is very small radius to make visible effect on your original span size.

Upvotes: 0

Related Questions