Ring Offset lets through small slivers of the shadow its attempting to cover

[sir-captainmorgan21]

What version of Tailwind CSS are you using?
4.0.7

What build tool (or framework if it abstracts the build tool) are you using?

React 19.0.0, Vite 6.0.9

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL
https://play.tailwindcss.com/tteziugoPI

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue
When using ring-offset-* along with rounded-*, it leaves a small sliver of the ring shadow visible. Its not super noticeable, but once you do notice it, as a developer, I cant not see it now.

[wongjn]

I think this happens due to antialiasing/sub-pixel rendering. As a work-around, you could consider using outline instead: https://play.tailwindcss.com/OecP0WhlGV

[adamwathan]

Yeah this is just an unfortunate CSS/browser thing. Use outline instead if you can, and if you can't, adding a background color to the nested element usually helps:

https://play.tailwindcss.com/ZgDYBNxTsE