Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

Mimbo Pro

Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.

The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.

For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:

#main-wrapper {

border: 3px solid #000000;

[other properties here]

}

Using this example, you could also change the color, and width of the border, like this:

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).

Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:

#sidebar-wrapper {

background: #ffcc00;

[other style properties here]

}

To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:

#sidebar-wrapper {

background: url(http://imagehost.com/yourimage.jpg);

[other style properties here]

}

You can also combine color and image background properties, like this:

#sidebar-wrapper {

background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;

[other style properties here]

}

You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.

By combining

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.

The style properties for these sections in your template would probably look like this:

• Header Section - #header-wrapper or #header-wrap
• Main Posts Section - #main-wrapper, #main-wrap or #main
• Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar
• Footer Section - #footer-wrapper, #footer-wrap or #footer

If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!

Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.

Experiment with different styles!

Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.

Here are some useful resources to help you use borders and background images in your own Blogger template designs:

• CSS Border Properties: Learn more about using borders
• Web Color Calculator: Find the hex values of your favorite colors
• Color Blend: Find the perfect color scheme for your blog design
• Stripe Generator: Create striped backgrounds
• Squidfingers: My favorite resource for tiling image backgrounds

I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments below.