White Border Around Image with Border And Box Shadow

Here’s my issue. I put a border of 3 px around my image, to have a white sort of outline appear between the image and border. I tried putting the border with the parent but the problem still persisted. i tried messing with the image fit of the image and that didnt fix it.
even when i publish it i can still see the white outline.


https://preview.webflow.com/preview/ivan-c58dee?utm_medium=preview_link&utm_source=designer&utm_content=ivan-c58dee&preview=97d3a2ddbbf34278f77eaf057efb8c1f&pageId=6126b9f65e61046ed68a9886&workflow=preview

Hi @VadikAladik, thanks for your post, I was not 100% clear from the description, are you trying to remove the white border that shows around the image and just have a 3px black border with box shadow?

It might be that the white border is some artifact of the responsive image feature where during compression that white line of space on the edge was created. When I look at the image in the browser with no html, I see the white line:

Shared with CloudApp

In this case, you can set the parent element to an overflow hidden, then on the parent element set the border to 3px and set the Box shadow as you wish:

Then go to the image, remove the border and box shadow from that style and add a scale transformation of just a small amount to zoom in on the image, this will extend the whitespace beyond the parent which is set to overflow hidden and hides the whitespace.

Shared with CloudApp

The Scale transformation looks like:

Shared with CloudApp

The end result is:

Shared with CloudApp

Is that what you were trying to achieve?

sorry for the late reply, but doing the scale transformation results in not a minor zoom but a big one.

also the artifacting and zoom effect differ between break points.


Hi @VadikAladik, thanks for your reply.

If the zoom and cropping does not work for you, one thing that you might try is to disable the responsive image feature for that image element, You can disable this feature for a specific image by hitting CMD+SHIFT+O on Mac or CTRL+SHIFT+O on Windows, then clicking the checkbox that’s revealed in the image settings panel.

It might be the responsive image variant creation is adding the white border (but I have not seen the original image).

After disabling the responsive image, you can then set the image and border as normal without the zoom and cropping to see if that helps, let me know when done and I can help to check again.

As to the lower viewports, I only checked the desktop, so for the zoom and crop further adjustment might be needed on lower viewports.

Thanks in advance

ok so i think i have a solution; making a border in the webflow designer will always result in a white outline around an image, so the solution is to import the photos with a border already on them(from like figma or something). i turned off responsive image for both of the slideshow images which got rid of the artifacting with the box shadow (hopefully the website wont be too slow).

https://preview.webflow.com/preview/ivan-c58dee?utm_medium=preview_link&utm_source=designer&utm_content=ivan-c58dee&preview=96a9a708f67269e4feb7d2efcf68aca4&pageId=6126b9f65e61046ed68a9886&workflow=preview

https://ivan-c58dee.webflow.io/work