Add Custom Image Border in Windows Live Writer

In this tutorial, I will show you how to customize image border in Windows Live Writer according to your own preferences or liking. Use this guide as your reference to make your articles more creative and presentable to your blog audience.

As you may know, there are only a few picture styling options available in Windows Live Writer and it does not mean that you can’t further format images on your posts. You can make it possible by editing image HTML code the easiest way.

The guide below is applicable to blog templates with no custom image settings such as auto-drop shadow and border.

Insert Photo

Step 1: Open Windows Live Writer. Insert a photo and format it.

Under Picture Tools → Format tab → Picture style, select ‘Inherit from blog’. That option makes image borderless and shadowless.

Note: Drop shadow might appear in the image border if enabled on your blog template.

Edit HTML

Step 2: Go to Source tab. It is located at the bottom of Live Writer window beside Preview tab.

Find the image code. Example:

<a

 href="$Art[1].jpg"><img title="Art" style="margin: 10px; display: inline" alt="Art" src="$Art_thumb[1].jpg" width="490" height="368" />

 

This is an example of HTML code of the image I embedded below (Step 4).

Step 3: Find this opening line code: style= then add this code after it: border: 1px solid gray;

Example:

<a

 href="$Art[1].jpg"><img title="Art" style="border: 1px solid gray; margin: 10px; display: inline" alt="Art" src="$Art_thumb[1].jpg" width="490" height="368" />

 

The code you’ve just added will automatically create border at the top, bottom, right and left hand-side of the photo. The border is Gray with 1px thickness.
You can change the thickness by changing the ‘px’ value from 1 to 2 or whatever you want. You can change the border color as well like the sample image below. I changed ‘Gray’ to ‘Pink’ border instead.

Tip: If you want to change border style, you can replace ‘Solid’ with any of the following: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, or Outset

Step 4: Go back to Edit tab and check if border setting is applied accordingly.

Custom Image Border: 3px Solid Pink
Custom Image Border setting: 3px, Solid, Pink

See Also: How to Add Caption Below an Image on Windows Live Writer?

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.