adding border to module instead of image

hello,
I'm trying to achieve the following section geometry:

https://1drv.ms/u/s!AhYoWLoGnMXWjNxz9cH ... g?e=lCqGgO

I've set up the section like this:
https://1drv.ms/u/s!AhYoWLoGnMXWjNx0vmG ... Q?e=cl1f5h

Apparently there's no way to add a border to an image module, only to the image inside it:

When I add the border to the image, the border appears directly on the image border. However I'd like it to sit on the border of the module that contains the image. The image itself is set 30 pixels in from the element border with padding.

Here's a screencap of what I get. The border where it appears (thin line surrounding the image on upper left) and where I'd like it to be ( thick line surrounding the element, meaning the image plus the padding) :
https://1drv.ms/u/s!AhYoWLoGnMXWjNx1-H2 ... Q?e=mLkM7E

I've found a workaround with CSS (custom CSS > main element) to add borders:

border-right: 1px solid #333;
border-bottom: 1px solid #333;

This puts the borders indeed on the edges of the modules. However, there is a misalignment at the bottom now between the two columns (the left column, with two stacked image modules extends a bit lower than the right column with just one image module).

Could this be due to how the lines are added?

For instance, the borders set up within the border tab (design settings) of the module adds the border inside the module.

But how are the borders with the custom CSS added? outside the module? This would lead to more pixels vertically when more modules are stacked, which could explain the misalignment.

Anyone can give some insights or solutions?

Thanks!