Adding border on border radius image background bleed through

Question

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 borde

Answer 1

There are several ways to avoid that annoying border-radius background bleed:

Method 1: Wrapper with Background Color

Put the in a wrapper element, and add padding to the wrapper, with a background color that matches the '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.

Method 2: Add Background Color to Image

Add a background color to your that matches the border color. It'll use the 's background color instead of the page background color to do the antialiasing.

Method 3: Use Padding Instead

Don't bother with a border. Add padding to your 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/