WordPress: How to add a border around images

Text: Solveig Hansen, 2016 / Photo: istock.com/Roger Lecuyer

Frame your images in WordPress.com posts.

After you have inserted your image into a post in the Visual editor, switch to the HTML editor to see the HTML code. It looks something like this:

<img class="aligncenter wp-image-678"
src="https://z4shortblog.files.wordpress.com/2016/08/writers_block1.jpg"
alt="Writers block" width="231" height="334" />

Use CSS and HTML to add a solid border, black in this example:

Writers block

<img class="aligncenter wp-image-678" style="border:4px solid black;"
src="https://z4shortblog.files.wordpress.com/2016/08/writers_block1.jpg"
alt="Writers block" width="231" height="334" />

Add some space between the image and the border:

Writers block

<img class="aligncenter wp-image-678" style="border:3px solid #eeeeee; padding:8px;"
src="https://z4shortblog.files.wordpress.com/2016/08/writers_block1.jpg"
alt="Writers block" width="231" height="334" />

Instead of a solid border, use a double one:

Writers block

<img class="aligncenter wp-image-678" style="border:5px double #8C8787; padding:35px;"
src="https://z4shortblog.files.wordpress.com/2016/08/writers_block1.jpg"
alt="Writers block" width="231" height="334" />

Or choose outset:

Writers block

<img class="aligncenter wp-image-678" style="border:4px outset #eeeeee; padding:8px;"
src="https://z4shortblog.files.wordpress.com/2016/08/writers_block1.jpg"
alt="Writers block" width="231" height="334" />

Try different padding values and different border types: solid, dotted, dashed, double, groove, ridge, inset, outset.

Share your thoughts:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s