Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 5, 2007

Digg This Story

Add or Remove Borders in CSS Templates

We have received a number of queries from people wanting to remove the image borders or add sidebar borders in the CSS layouts. In this article, we cover briefly what the border styles in CSS templates are and where you can find them. With this guide, you will be able to remove the borders around the images, sidebar or main posts, or change the style and color of the borders to match the Blog design.

The point to note is that some templates such as Scribe, TicTac and Thisaway use background images to create the look of the main post and sidebar sections. The 'borders' you see in these templates are the result of the background images. To change or remove the 'borders' around the main post and sidebar, the images will have to be altered and replaced. The sections in this article on CSS borders around Blog Posts or Sidebar will not apply to these templates.

Border Property

When you are logged into Blogger, go to Template -> Edit HTML and do a search (Ctrl+F) for the word “border”. You will see it appearing in a number of places in the template. In most of the stylesheets, the border settings are defined in one shorthand declaration like this:-

border:1px solid $bordercolor;

1. border

This is a shorthand setting for all the four borders. Instead of “border”, we may sometimes see “border-top”, “border-bottom”, “border-left” or “border-right” which sets a style specifically for that element's top, bottom, left or right border respectively.

2. border-width

There are three properties in the declaration. The first setting is the border width. It can be stated as a value in pixels like the example given or in general terms. The possible values are:-

1px (or any other length)

3. border-style

The second setting in the shorthand declaration is the border style. Here, the possible styles are:-


You can see some of these styles in our following examples.

4. border-color

The final setting is the border color. If you see $bordercolor, it is a variable (“Border Color”) that you can change via Template -> Fonts and Colors. If you want a specific color for the border of an element, you can also change $bordercolor to a color code. Possible values are:-


For a list of color codes, you may refer to our Color Code Chart.

Now that we understand what these styles are, we can proceed to customize our template. Go to Template -> Edit HTML and locate the border settings.

Border around Profile Image

Look for this line and if you do not want the border, change it to “0px”:-

.profile-img {
border: 0px solid $bordercolor;

or “none”:-

.profile-img {
border: none;

If you want a different style or color, amend the settings to one of the other possible values outlined above. For example, if we change the code to this:-

.profile-img {
border: 2px dashed #ff00ff;

This is what you will see:-

Add or Remove Borders in CSS Templates

Border around Images in Blog Posts

The border styles for the images in Blog Posts are found here:-

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

Set it to “0px” or “none” to remove the image borders in the Blog Posts or customize the border style to something you like. Without a border, an image looks like this:-

Add or Remove Borders in CSS Templates

With a border style such as this:-

.post img {
border:3px outset #ff00ff;

The image is contained within a box:-

Add or Remove Borders in CSS Templates

If you post a lot of pictures and graphics on your Blog, you may like to spend some time configuring this and choosing an appropriate border setting.

Border around Image Links

In many of the templates, there is a style defined for image links. These are the clickable images which bring you to another webpage or URL when clicked. If you are interested in creating image links or want to understand what the codes are, you may view our Hyperlinks article.

You can customize the border settings of image links at:-

a img {

Border around Images in Sidebar

In our Minima template, there is no unique style definition for images in the Sidebar. We can still set a special border style just for the images in the Sidebar, without affecting the border styles in our Blog Posts. Add into the stylesheet this code:-

.sidebar img {
border:6px ridge #ff00ff;

In the above example, the images in the Sidebar will have a “ridge” effect that looks like this:-

Add or Remove Borders in CSS Templates

Border around Header

Many people upload images into the Blog Header and a border around the Header will stick out like a sore thumb. To remove the Header border, look for the border settings under any of these.


Border around Blog Posts

To demarcate each post, instead of a line at the bottom, you can have a border around the entire Blog Post.

Add or Remove Borders in CSS Templates

Scroll to where you see this and change or insert the code (shown in red):-

.post {
border:1px dotted #ff00ff;

We have included a padding to give some space between the contents and the border. Without this padding, the text will be too close to the border.

Border around Sidebar

Similarly, to add a distinctive border around the Sidebar, change or insert this code (shown in red):-

#sidebar-wrapper {
border:1px dotted #ff00ff;

In some templates, you may insert the code under any of these:-


The padding adds a space between the Sidebar content and the border. Preview the template. If you find that the layout is affected because of the padding, reduce the margin between the Blog Posts and the Sidebar.

Add or Remove Borders in CSS Templates

Border around Footer

If your template has a Footer element, the border style can be found under:-

#footer {
border:1px solid $bordercolor;

Border around Entire Blog

If you wish to have a border surrounding the entire Blog, you may add a border style to this part of the template:-

body {
border:1px solid #ff00ff;

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Jayne said...

Very useful!

I added a link on 'About Blogging'

Thanks for the resources!

falred said...

thanks for the great website!
i use the stretch denim template, and i can't figure out how to place a line to separate each post, just like the one you are implementing in your site.Can you tell me how?
thanks again!

bizwhiz said...

Hi falred

You can look up our article - Add a Separator Line between each comment.

BayingAtTheMoon said...

Thanks for laying out the codes so clearly. How can I use these values to have a border around an individual widget?

bizwhiz said...

Hi BayingAtTheMoon

Each widget will have a unique widget ID. For example, if you have created a HTML widget, the ID may be HTML1.

Find out what the ID is. Then insert a border style e.g.,

#HTML1 {
border:1px solid #000000;


Thanks for all the helpful info. With your help I got rid of the border around the image I have at the top of my blog. However after I did this it shifted my side bar all the way down to the bottom of the page. My image is not technically the header. My template is Minima Lefty Stretch. Anymore help? Thanks again.

Sharon said...

Is there any way that an image can be added to separate each post instead of the line?

danakom said...

Thanks for information...

amiya said...

Hi Bizwhiz
Yours is the worst website I've ever seen. So informative and resourceful that I am loosing my sleep! I am simply addicted.
Would you please shed some light on how to make dynamic meta description,keyword and title tags for individual posts in blogger, as Google demands?
Thanks for all you have given us.

Anonymous said...

hi bizwhiz,

good day. how can i resize the photo i upload to a original photo size????

thanks in advance.

Chris said...

Very informative - thanks!

Sarah said...

Hi there! When I added a border around the sidebar in my minima template, the sidebar content disappeared. What am I doing wrong?

Sarah said...

When I try to add a border to the left of the sidebar, all the sidebar content disappears. What am I doing wrong?

Vimal said...

Thanks for your wonderful insights! As a two-day old blogger I find this information most helpful!

Anonymous said...

hw about remove the border in my header? o.o

Anonymous said...

thank you very much for the tips.
I have share your link from my page.

Anonymous said...


Thanks for all the great stuff that you guys taught. I have a question. I want to set up the links like the one on your side bar, where it can link up pages of the blogpage when I click on them. Can you let me know how to do it? Thanks.

S said...

This is a wonderful blog, helps us a lot! Could you pls help me, whenever I change to minima 3 column , my right sidebar goes to bottom side! How to prevent this? Appreciate your help.