How To: Edit or Remove Image Borders

Ever load up a button or image in your sidebar, only to get a thick ugly border in some generic colour that doesn't fit in with your blog?

If you're happy with this then fine. But did you know you can change the width, thickness, colour and type of border for images on your blog?

In my blog, for example, the border 'style' is located in the Links part of the style sheet:

/* Links
----------------------------------------------- */
a:hover {
color:#fff;
}
a img {
border-width:0;
}
#main a:link {
color:#347;
}

Here is an example from another template of where the border style was located in the Layout part of the style sheet:

/* Layout Divs
----------------------------------------------- */
main {
padding: 1px 0px;
margin: 0px 200px;
border: 5px solid #fff;
}

In order to format the border, you will need to open your blog template and edit the border style - which is located in your template style sheet somewhere after the <style type="text/css"> tag but before the </style> closing tag.

Here are some examples of border styles which should hopefully explain how it works:

no borders => {border-width:0;}

border 1px wide => {border: 1px;}

solid border, 1px wide => {border: 1px solid;}

dotted border, 5px wide => {border: 5px dotted;}

solid border, 8px wide, white => {border: 8px solid #fff;}

I hope some of you will find this helpful and not too confusing. Any questions, do not hesitate to contact me.

Coming soon, how to post pictures/photos to blogger (I promise!)

REMEMBER: Before making any changes or modifications to your blog template, make a back up copy of your template. Do this by copying the template and pasting it into Notepad, and save it as your backup.