June 08, 2011

Adding a border to inserted images

When you use the Insert Image button to add a photo to a post, you may want to add border around the image.

You can add a border to an individual image using HTML or set a border to be added to all inserted images by default using CSS.

Border Attributes

Border Style

The most common styles of border are dotted, dashed, and solid.

Additional border styles are double, groove, ridge, inset, and outset. Using the advanced styles, you can mimic the display of a frame or drop shadow around the image.




Border Color

The border color is defined using a color hex code. For example, the hex code for black is #000000.

You can find some color hex codes here and here.

Border Width

The width of the border is typically set in pixels. e.g. 2px, 4px.

Add a border using HTML

To add a border to single image, you can edit the HTML of the image tag. After adding the image to your post, click to the HTML tab and locate the image code. The image tag will be similar to:

<img class="asset asset-image at-xid-6a00e009942b4c8833015432d8eb7d970c" style="width: 400px; display: block; margin-left: auto; margin-right: auto;" title="Grand-tetons" src="http://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" alt="Grand-tetons" />

Within the img tag, add the border: #000000 6px outset; to the style attribute.

<img class="asset asset-image at-xid-6a00e009942b4c8833015432d8eb7d970c" style="border: #000000 6px outset; width: 400px; display: block; margin-left: auto; margin-right: auto;" title="Grand-tetons" src="http://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" alt="Grand-tetons" />

Where you can enter your own color code, border width, and border style in the code.

Add a border using CSS

To apply a border to all images by default, you can use Custom CSS. Custom CSS is a feature available with the Unlimited, Premium, and Business Class plans.

At Design > Custom CSS, you can enter the CSS code for the image border into the text field and click Save Changes.

.entry-content img { border: #000000 2px solid; }

Where you can enter the preferred color hex code, width, and style.

Examples

Custom CSS

.entry-content img { border: #00008B 4px solid; }

HTML

<img src="http://help-orig.typepad.com/.a/6a00d8350328d253ef0153915ff7fb970b-400wi" style="border: #00008B 4px solid;" />

Result

Custom CSS

.entry-content img { border-right: #999999 10px outset; border-bottom: #999999 4px outset; border-left: #000000 4px outset; border-top: #000000 4px outset; }

HTML

<img src="http://help.typepad.com/.a/6a00e009942b4c8833015432d8eb7d970c-400wi" style=" border-right: #999999 10px outset; border-bottom: #999999 4px outset; border-left: #000000 4px outset; border-top: #000000 4px outset;" />

Result

Not quite what you are looking for? Check out these other articles:


Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services