I'm adding a black border on images with a blue background and while doing so, it appears to add an ever so noticeable background colored outline on the INSIDE of the border when doing so. Is there a way to get rid of this? The code I'm using is simple:
border: 3px solid rgb(0, 0, 0);
There are several ways to avoid that annoying border-radius background bleed:
<img> in a wrapper element, and add padding to the wrapper, with a background color that matches the
<img>'s border. This way, any antialiasing that happens on the image will take into account the background color of the wrapper, rather than the background color of the page.
Add a background color to your
<img> that matches the border color. It'll use the
<img>'s background color instead of the page background color to do the antialiasing.
Don't bother with a border. Add padding to your
<img> equal to the border size you want, and add a background color in the border color you want. This gets you the same effect with the least amount of code.
Here's a JSFiddle with each of these methods: https://jsfiddle.net/4zpL98au/14/