Ring in combination with radius and offsets renders wrong in Safari

[roydigerhund]

What version of Tailwind CSS are you using?

For example: v4.1.6

What browser are you using?

Safari 18.4 (20621.1.15.11.10)

What operating system are you using?

macOS 15.4.1 (24E263)

Reproduction URL

https://play.tailwindcss.com/Xbgvqjl0sg

Describe your issue

In Safari (Chrome and FF rendered correctly) when using the ring utility with ring-offset on an element with rounded corners, the rounded corners of the resulting box-shadow are rendered with a "dent".

It does not happen when using the offset utility, this way it can be used as a comparison.
The following screenshot shows the render bug on the left element.

Possible solutions

1. If the reason to use box-shadow instead of outline for the ring utility was the missing support for rounded elements, Tailwind could go back to outline because rounded elements are now supported.

2. File a bug report for Safari. I haven't had a lot of success in the past with this, maybe it's quicker when someone from the Tailwind Labs team does it.

[philipp-spiess]

Hey! We can't change ring to use outline over box-shadow since that would be a breaking change when used in combination with outline I'm afraid. So I recommend we do 2) and create a Safari issue for this and you can use outline for now that it follows the curvature of the element bounding box.

maybe it's quicker when someone from the Tailwind Labs team does it

Unfortunately (well, or fortunately, you don't want favoritism I suppose) not.

[roydigerhund]

… since that would be a breaking change when used in combination with outline I'm afraid.

Yes, makes sense.

Do you wanna file the bug report on WebKit or shall I?

[rozsazoltan]

Just a related: box-shadow on safari vs chrome (using TailwindCSS v3's ring class)

[roydigerhund]

On a second thought, it probably makes sense to not use ring-* anymore in new projects since outline-* now works in all major browsers and you don't have to use the back with a shadow in background-color to get an offset. Outline offsets are transparent and therefore a better way.

The box-shadow issue should nevertheless be fixed by WebKit.

[sumansuhag]

HI,
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-2 {
--tw-ring-offset-width: 2px;
}
.rounded-md {
border-radius: 0.375rem; /* 6px */
}

Good luck!

SUMAN SUHAG