Image border

  • Unknown's avatar
    headcomposter · Member ·

    Why can’t I format my images to give them a border? The guide gives these directions:

    But all I see in the style sidebar is this:

    And the expanded menu is no help:

    Grateful for any help you can offer.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    zikriaahmad411 · Member ·

    Hi @headcomposter.

    The reason you’re not seeing the Border & Shadow settings in the Image block or the entire Styles section is because your site is currently using the Twenty Fifteen theme. This is a classic theme, which has some limitations when it comes to design flexibility and the newer style options.

    If you’d like to use the Border & Shadow feature and access the full Styles panel like in the guide you’ve been following, you’d need to switch to a block theme. A great option would be the most recent version of your theme family: Twenty Twenty-Five. You can see how the Border & Shadow setting appears in block themes here: https://snipboard.io/4BbU0F.jpg

    If this feels like a good direction for your site, you can follow this guide to smoothly transition from a classic theme to a block theme: Switch from a Classic Theme to a Block Theme.

    If you’d like, I can also help you explore some block themes that would suit the look and feel you’re going for. Let me know what you think!

  • Unknown's avatar
    headcomposter · Member ·

    That makes sense – thanks! I’m quite attached to my site’s look, and I’ve made a lot of customizations I’m not sure would transfer, so I’d like to stick with the Twenty Fifteen theme.

    I’ve also tried to induce borders by editing the HTML:

    But no matter how I phrase it (I’ve also tried border:3px) I get an error message: “Block contains unexpected or invalid content.” Is the theme overriding my instruction? Is there a way round this?

  • Unknown's avatar
    josefhtest · Member ·

    Hi there @headcomposter,

    That seems frustrating. Let’s look into it.

    Since you’re using a classic theme like Twenty Fifteen, you’ll primarily be working with the standard Block and Classic editors for your posts and pages. It seems you’re using the code editor to add inline styles directly into your HTML, which can sometimes lead to those “unexpected or invalid content” messages. Classic themes often strip or ignore custom inline styles for security and consistency.

    On the Personal plan, custom CSS isn’t available, so inline styles like borders may not be supported as you expect. The easiest way to style your images without switching to a block theme is to use the image block settings in the visual editor, or you might consider exploring a plan that includes CSS features for more control.

    Premium plan features: Premium plan

    You can also purchase a CSS add-on : Add on custom CSS

    Let me know if that helps.

  • Unknown's avatar
    headcomposter · Member ·

    Thanks for this. It does look like I have some CSS functionality: “Additional CSS” at the bottom of the Appearance menu on the dashboard, and “Additional CSS class(es)” in the “Advanced” section of the Block menu on the edit page. Will these work without purchasing the add-on? It’s a bit much to spend just for borders around images.

  • Unknown's avatar
    josefhtest · Member ·

    Hi there @headcomposter,

    Thanks for the follow-up. After reviewing this again, there is an update on this so you can use the Additional CSS feature under Appearance > Customize > Additional CSS on your current plan without any extra cost. The same goes for the Additional CSS class(es) field in the Advanced settings of your blocks — those will also work without needing an upgrade.

    Here are some guides that you might find helpful:

    If you need further help, please feel free to contact us back.

  • Unknown's avatar
    headcomposter · Member ·

    Hi @josefhtest,

    Thanks for this further info. It seems I’m able to use custom CSS to change some things (e.g., I can induce a hanging indent for text), but my attempts to induce a border around images get fouled up, I guess by pre-existing style commands. I enter a simple command in the Customize CSS box

    and invoke that class in the Additional CSS Class(es) box for a specific block. That command makes into the HTML

    but the end result is garbled –

    – I suspect by pre-existing formatting in the class wp-block-image, which I can’t view or edit. If I remove some formatting from the block, I get closer to what I want, but can’t get to a simple 1px border around the image.

    Unless you can see a workaround, it looks like I’m going to have to modify each image manually outside WordPress. Any last ideas before I give up and take that route?

  • Unknown's avatar
    josefhtest · Member ·

    Thanks for sharing those screenshots @headcomposter

    CSS help is out of our scope of support, but I can give some insight on this:

    • The border isn’t applied to the image itself (<img> tag), but to the outer <figure> element. Since <figure> may already have theme styles or margins/paddings, that can affect how or whether the border appears as expected.
    • Classic themes like Twenty Fifteen often have built-in CSS that styles images, figures, and captions, which might override or conflict with your custom rule. That’s likely why the result looks “garbled” to you.

    If the styling still doesn’t apply as expected, editing the images externally to add borders before uploading may indeed be the simpler route on classic themes, especially when CSS conflicts are involved.

    I know that you won’t like to change themes, but I still recommend exploring newer block themes that provide more design controls directly in the editor without needing extra CSS. You can learn more about it here: Switch from a Classic Theme to a Block Theme

    Let me know if you’d also like some help looking into other themes or alternative design options!

  • Unknown's avatar
    headcomposter · Member ·

    Thanks for this @josefhtest (and for your help too @zikriaahmad411). Changing themes would mean many hours of work to rework pages I designed with the Twenty-Fifteen theme’s parameters. (I hope you never actually retire this theme!) It looks like I’ll be sizing and bordering images manually. Could be worse. Anyway, thanks again.

  • Unknown's avatar
    josefhtest · Member ·

    You’re very welcome @headcomposter,

    I completely understand sticking with a theme you know and like. Manually adjusting images can be a bit more hands-on, but at least it keeps the look you’re happy with.

    If you ever need help down the line with other tweaks, feel free to reach out. Happy blogging!

  • The topic ‘Image border’ is closed to new replies.