Tailwind opacified color doesn't render the same on the background and the border

Using the Tailwind color purple-600/50 on both the background and the border of an element, they don't render the same color. It's like the opacity is not the same (tested on Firefox and Safari). See https://play.tailwindcss.com/KrjtSAezXQ.

<img src="/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full" />

However, inspecting the css shows the same rules :

background-color: rgba(147, 51, 234, 0.5);
border-color: rgba(147, 51, 234, 0.5);

The image being used doesn't seem to have an intrinsic background opacity, or the same would happen with no css opacity :

<img src="/img/logo.svg" class="h-6 bg-purple-600 border-purple-600 border-4 rounded-full" />

What am I missing ?

Solution

By default, the border gets drawn on top of the the background. Thus, the border color gets overlaid on to the background color, hence the difference in color.

If you want the same color in both situations you could consider:

Using background-clip: padding-box via the bg-clip-padding class to stop the background color being drawn underneath the border:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 border-purple-600/50 border-4 rounded-full bg-clip-padding" />

Emulating the border with padding around the image:

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<img src="https://play.tailwindcss.com/img/logo.svg" class="h-6 bg-purple-600/50 p-[4px] rounded-full" />