How To Change And Remove Borders In Blogger

If you performed the modification to add gadgets to the header of your Blogger blog if you're using the Minima template you may want to alter the borders. Or you just may want to alter the borders in general to give your blog a slightly different look. The easiest modification to your borders you can make is to change the color under Layout>Fonts and Colors. There you can change the colors to make them stand out or make them the same color as your background color to "hide" them.

This image is of four examples of how you can change the borders in your blogger template. The first border is the default sidebar border in Minima made of little dots . The second border is a double line border. On the second row is a solid border line and a dashed border. Some templates may use one or more border styles; one for the header, one of the sidebars and one for the images of the post area. But they're all easy to find in the template and make changes to if you're so inclined.

The first border you're likely to encounter will be a border for the header-wrapper of your header. In Minima it looks like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

If you want to hide it the easiest way is under "Fonts and Colors" by making it the same color as your background. If you want to remove it completely just deleted the whole line. If you'd just like to change the style of it change the part in red. For example; change solid to dotted, dashed or double. Note: If you change it to dotted or double increase the 1px to 3px so you can see the border better.

Now that you know where to look for the code for the borders and how to make some changes here are a few more you can make.

How to remove the border around images in your posts.

.post img {
padding:4px;
border:1px solid $bordercolor;
}

You can delete the line in green to remove the border around your images in your template or make changes to the style of the border. In the Minima template this creates the border at the bottom of the post and the bottom of the sidebar.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

If you'd like to have two different borders- one for the bottom of the post and one for the bottom of your sidebars you can split it up like so:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

This brings us to another tip. After I split up the code I took the border from another template's sidebar border and added it to this template for GardenBloggers.com. If you look at my sidebar I'm using the border from the Snapshot template. It was just a matter of copying and pasting the code from that template into this one.

Finally, you may have noticed this already but in case you didn't here are the ways to dictate how your border will wrap around whatever area you're adding it to.

border:1px solid $bordercolor;

Makes a border that wraps around the whole area.

border-bottom:1px solid $bordercolor;

adding -bottom will give you a border only at the bottom. -top, -right, -left will create a border only in those areas.