Adding CSS border property distorts image?

Design help General
1

I have a banner image with a 10 pixel grey border applied. Whenever I apply the border the image becomes blurry, as if the image is resizing. If I remove the border image looks fine. I ended up having to put a border around the image in PS but this is less than ideal considering the image resizes as the page shrinks/grows.

Any ideas on how to fix this? Thanks!

2

Hi, @Bghead8che

If you set the size for the image, then applying the border to it will change the actual size of the picture, which can cause distortion. Because the border is part of object size (width, height)

Try to apply box shadow with blure = 0 and distance = 0, only size.

Cheers,
Anna

3

Thanks Sabanna,

I am applying a border, not a shadow. Should I save the image 10 pixels smaller on each side in PS? Would that help?

Thanks!

-Brian

4

Can you please share you Webflow Share Link? Thanks! :sunglasses:

5

I fixed it using Sabanna’s advice. You have to reduce the actual size of the image to compensate for the border width. Strange, I don’t remember ever having do this before when using CSS. Most of the time a border is added to the outside of the image. Webflow’s default appears to be an inner border. Why it does not just go over the image is above me.

-Brian

6

It depends on the CSS model, that used for the site. Here is visual example:

As you can see, when there is border-box model, element width contain border “inside”.

Regards,
Anna

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.