Border Around IMG

Question

I've been looking for answers, but everything I could find does not seem to fix my problem.

I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.

I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.

Does anyone know how to get rid of it?

I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):

Answer 1

This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.

Answer 2

I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:

https://github.com/kenwheeler/slick/issues/1636

putting outline:none; in the corresponding container fixes it.

Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.