NO BUG: Image - border - background visible between border & image

[amigosmios77]

BROWSER: Version 125.0.6422.142 (Offizieller Build) (arm64)
OS: MacOS Ventura 13.3
URL: DOOLAR - $WIF (DISCLAIMER! CONTENT ON THIS WEBSITE COULD BE DEEMED OFFENSIVE - VISIT AT YOUR OWN RISK!)

Hello!

Image - Border Radius 20px - Border 6px / solid - Background is slightly visible on the edges between border and image (not really visible on screenshot)

It gets even worse, when settin - CONTENT - LINK TO - Light Box
(Stars from the background clearly visible in the corners)

Any idea how to fix this?

Thanks

[amigosmios77]

Changed BG to yellow to make it more visible.

[amigosmios77]

Solution to cover corners:

Remove radius & border from image - apply to wrapper.
Set wrapper overflow to hidden.
Set image to cover, set image height and width to 100%.

That poses a new problem.

Theres a transformation and hover state applied to the wrapper.

Transform: Rotate 2 deg.
Hover: Rotate 0 deg. & scale up 1.025

When in hover state, there are gaps left and right.

Any ideas how to fix this or do i just have to live with it?

[amigosmios77]

My solution to the second problem.

I applied a background color (same color as border) to the wrapper.
Now gaps are not visible anymore.

But is that a professional solution?

[Matej]

Hi @amigosmios77,

it’s nice to see that you solve the issue. The issue you’re encountering with the gaps/lines appearing between the border and the element when applying a transform can happen due to the way browsers render transformed elements. The slight rotation you applied (2 degrees) combined with the scaling can introduce sub-pixel rendering issues.

Your solution works fine, and it will work every time. You could try to increase a border by 0.1 pix or a bit more, or adjust a scale/rotation a bit, but that would not ensure that it would work every time.

Because of this, I will mark the thread as NO BUG.

Best regards,
M