Image Compare with a border

I have an Image Compare sample on which I am trying to have a border around the image. You can see the sample here:

You can see at the bottom of the sample that there is a gap between the bottom of the image and the border. I haven’t yet figured out how to remove it. I notice if I enable the ‘Reset Button’ option then it appears inside the border as well.

Is there a way to create a border only around the image?

Adding a border is not a feature of the stack. The way you’re adding a border encapsulates the entirety of the stack, which includes more than just the image.

Gary, if your okay with adding a bit of custom CSS to the page, the following should work.

.images-compare-container {
	border: 1px solid white;
1 Like

excellent. thanks @DLH. that works perfectly!

Thanks, Adam. All good now with the work around from @DLH. I’ve just updated the sample to show it as I had hoped to achieve.