Adding a border around an image

  • Unknown's avatar
    lilliadelmo · Member ·

    I’m working on WordPress.com. How can I add a border to an image? Thanks. Stay safe.

  • kokkieh · Staff ·

    Hi there,

    What is the URL of the site you’re working on?

    To do this on a free site you’ll need to add inline styling in the post’s HTML.

    Edit the post/page and click on the image block. Click the … icon in the block toolbar and select “Edit as HTML”.

    You’ll see HTML code that looks like this:

    <figure class="wp-block-image size-large"><img src="https://lillicoursera.files.wordpress.com/2020/06/aircraft-airport-condor-passenger-aircraft.jpg?w=910" alt="" class="wp-image-82"/></figure>

    Modify it to look like this:

    <figure class="wp-block-image size-large"><img src="https://lillicoursera.files.wordpress.com/2020/06/aircraft-airport-condor-passenger-aircraft.jpg?w=910" alt="" class="wp-image-82" style="border:black solid 2px;"/></figure>

    Adjust the color and the width to what you want.

    If you click on the block toolbar again it will give you an error that the block contains invalid HTML. You can just ignore that. Update/publish the post/page, and your border should be visible there.

    If you want to add borders to all images on your site, the simpler way to do this is to add custom CSS to your theme itself, but that requires the Premium Plan.

  • The topic ‘Adding a border around an image’ is closed to new replies.