[Resolved] Add border to some images

[Amiria]

Hi there,

I would like to apply a border to some images within posts and pages.

I tried adding the following as custom CSS, and then gave the image block the CSS class of image-borders, but it didn’t seem to work.

.image-borders img {
border-color: #ffcd00;
border-width: 10px;
}

Any help most appreciated. Thank you!

[Leo]

Hi there,

Your current method should work.

Try this CSS instead:

.wp-block-image img.image-borders {
    border-color: #ffcd00;
    border-width: 10px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

If this doesn’t work, can you link me to a post where this method is applied?

Let me know 🙂

[Amiria]

Thanks Leo.

I’ve added the CSS with the SiteOrigin CSS plugin, and then added image-borders in the ‘Additional CSS class(es)’ section for the image block when editing the post. The border doesn’t appear to be showing up so far. I’ve added a link in the private section below – see the green image near the top of the post.

Thanks!

[Ying]

Hi Amiria,

Your CSS is missing the border-style in order to make the border to show, try this CSS

.wp-block-image.image-borders img {
    border-color: #ffcd00;
    border-width: 10px;
    border-style: solid;
}

Or we can simplify the CSS to 1 line:

.wp-block-image.image-borders img {
    border: 10px solid #ffcd00;
}

Let me know 🙂

[Amiria]

Awesome, thank you so much! 🙂

[Ying]

No problem 🙂

[Amiria]

Oh, sorry, one more question! This now causes images to jut out 20px wider than the text (i.e. the width of the border causes the image to extend beyond the width of the column). Is there a way to keep the image+border perfectly aligned with the edges of the column? New example linked below. Thank you!

[Ying]

Yes, you can add one more line to the CSS, it will become this 🙂

.wp-block-image.image-borders img {
    border: 10px vsolid #ffcd00;
    box-sizing: border-box;
}

[Amiria]

Brilliant, thank you! Worked perfectly. 🙂

[Ying]

You are welcome 🙂

[Author]

Posts