'Adding transparent border around badge [duplicate]

I am attempting to do something like this: Where the badge in the corner has a transparent border the cuts through the image into the background color.

enter image description here

I have this play going: https://play.tailwindcss.com/1DYry38e5z but can't seem to get the badge transparent border working properly. Any help would be greatly appreciated!

htmlcsstailwind-css


Solution 1:[1]

Is this your answer?

<span class="absolute right-0 h-5 w-5 rounded-full bg-green-600 border-2 border-white"></span>

Solution 2:[2]

Just Reduce the border transparency to to your needs

 border: 1px solid rgba(255, 0, 0, .5);

in this case .5 means 50% transparent, just reduce it to .0 and everything will be good.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vugar Taghiyev
Solution 2 Napstar

Related Questions