Adding a border to an aligned image?

[RavenManiac]

I'm trying to add a border to several aligned images using the following CSS, which I'm placing in the Additional CSS Class under the Advanced section of Blocks. In addition, the caption area is getting messed up with I apply the CSS to aligned images.

If you scroll down the linked page, you'll see that it works fine with non-aligned images.

What am I doing wrong?

/* IMAGE BORDER 
--------------------------------------------- */
.photo-border {
    margin-bottom: 12px;
    margin: 20px 0px 10px 0px;
    box-shadow: 0 0 12px #666;
    padding: 10px;
    background-color: #fff;
    line-height: 0;
}

Thanks!

https://williamsburgmemorialpark.com/blog/

[RavenManiac]

I think I figured this out, but I had to use an HTML block to do it. Basically I had to add the CSS here:
<figure class="alignleft is-resized photo-border">

instead of here:
<div class="wp-block-image">

Of course, doing this means I can no longer edit the image visually, which kinda sucks. If anyone has a better, visual, solution please clue me in. 🙂

[andytc]

have you tried -

.wp-block-image img {
    margin-bottom: 12px;
    margin: 20px 0px 10px 0px;
    box-shadow: 0 0 12px #666;
    padding: 10px;
    background-color: #fff;
    line-height: 0;
}

[Author]

Posts