Feb 18

CSS Image Border

Blogging Add comments

When I blog I do my posts in the HTML view in WordPress. This gives me the ability to apply HTML tags to the text, links, and pictures.

This post shows how to add a CSS Image Border to a picture you have added to your blog post. Pictures that white out at the edges can be made to look better by adding a Image Border.

This is quite simple to do. You use the style attribute in the img tag and add two values to the images. The two values are border-style and border-width.

Here is the code:
style=”border-style: solid; border-width: 1px;”

And here is the code added to the above image:
<img src=”http://morechristlike.com/blog/wp-content/uploads/2011/02/charis-campground-tabernacle-150×150.jpg” alt=”Charis Campground Tabernacle” title=”Charis Campground Tabernacle” width=”150″ height=”150″ class=”alignnone size-thumbnail wp-image-13179″ style=”border-style: solid; border-width: 1px;” />

Here is the image with out the border. I like the above image with the 1px border and I think it looks better than the image below.

Just for your interest the picture is the Charis Campground tabernacle in Chilliwack, BC which hold very fond memories for me.

Charis Campground Tabernacle