Add support for border radius customization on rings

[hanna-del-rae]

Our team came across a scenario where a the designs required a pill shaped button to maintain a square(ish) focus ring. Since the rings maintain the shape of the buttons by default, we could not use the built-in Tailwind ring for handing our focus states. Would it be possible to add support to give developers control over the border radius of the rings, rather than have to manually add and style a :before pseudo-element in such instances?

[lewis374]

Pleased to see your issue as I think I have the same problem, I am also confused and in need of light on this same issue. Need help.
Fragomen Connect Client Portal

[andymccray]

As a workaround you could wrap the button contents in an additional container and style them to look like a pill: https://play.tailwindcss.com/N7rOyuKpTC

[tobistudio]

Really useful data. Thanks

[harrisono132123]

For me using 'rounded-none' before whatever border-radius variable you want (i.e. rounded-l-md), solved this for me.