Problems with image rendering

1. On the captioned image, your border style is being over-written by this one on line 1349 of style css.:

#content .wp-caption img {border: none !important; ...

Since this style is more specific it takes precedence. If you don’t want to change style.css because edits would be lost on update, try

#content .wp-caption img {border: 3px solid #ddd !important}

in your custom css.

2. The caption doesn’t look blurry here, though maybe I’d increase the font-size just a touch and darken the font color for more contrast to improve readability.

Have you seen the css validator at:
https://jigsaw.w3.org/css-validator/validator
The validator is flagging up some errors with your styles and if you continue to have trouble it may be worth working through them.

Hi lorro, thanks for your help!

I added your snippet to the custom CSS, plus added !important to the border-image style, and it works a treat. Thank you.

For the second problem, I meant to say that the image is blurry, not the caption. This is only an issue really because the images are often screenshots that contain text.

I’ll keep an eye on the validator, thanks for the link.

The image has a style which reduces the opacity to 0.8 on hover and maybe this isn’t helping clarity. Try this to override:

#content .wp-caption img:hover {opacity:1.0}