Border in Image

Hi there,

those sites have different CSS.
Site 1 uses:

.page-header-image-single {
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
}

Site 2 uses:

.page-header-image-single {
    border: 4px solid #cccccc;
}

Still it shows same as show in the screenshot.

I have added this CSS now

.entry-content img {
border: 4px solid #cccccc;
	box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
}

Where did you add that CSS as i cannot see it on the site, only the old CSS?

Ah, I didn't save.
Now I did, please check again.

Here is the link for site 1: https://www.masteryblogging.com/wp-rocket-black-friday-sale/
URL for site 2: https://www.blackfriday.masteryblogging.com/wp-rocket-black-friday-deal/

I have added same CSS on both sites but on-site 2, the border is looking good but in site 1, the border is having a gap (small white margin on the top, bottom and left but not in the right) please check it on the site 1 for clarity.

Hi,

I have added same CSS on both sites but on-site 2, the border is looking good but in site 1, the border is having a gap (small white margin on the top, bottom and left but not in the right) please check it on the site 1 for clarity.

Can you provide us screenshots of this issue? I can't seem to see it on my end.

Here's what I see from your site 1 link: https://share.getcloudapp.com/12urZovR

Perhaps you've fixed this already?

From my end I can see this:
Here's the screenshot from both sites.

Site 2: https://ibb.co/TmQG4Qv
Site 1: https://ibb.co/xsYs9Cz

It still has same issue I am facing

Not seeing this on my browsers either, which points to the device it is being viewed on.

You can try updating the CSS to this:

.entry-content img {
    border: 4px solid #cccccc;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
}

This removes any style attributes on the image that could affect its display. But as i said we're not seeing the issue.