Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Hiding an Image’s Pixel Border with CSS box-shadow

This is an edge case: I’m working on a WooCommerce project where I’m importing tens of thousands of product images from a supplier. The problem is, all the images have a 1 pixel black border and they look terrible when they’re displayed on the site. I have no idea why the supplier thought this was a good idea, but there you go.

To workaround the issue, I decided to attempt to hide the image border using the CSS3 box-shadow property. First, I wrapped the img element inside a div element. I then applied an inset box-shadow property to the div element, before adjusting the z-index of the img element to make it sit below the div. See the demo below.

See the Pen Hiding an Image’s Pixel Border with CSS by Philip Newborough (@corenominal) on CodePen.

Leave a comment

Your email address will not be published. Required fields are marked *