How to remove borders from page tabs gagdet on blogger

Todays post is a quick and easy one, how to remove borders from page tabs in blogger. You can usually do this in the template designer but sometimes that has restrictions so I’ve also written about how to remove borders for tabs in HTML. You may need to have a look around yourself for similar code as it varies from template to template.

How to remove the border around page tabs – Template Designer

If your template allows, you can change the separator colour, line colour or tabs border colour in the Template Designer (Template > Customise > Advanced) under the Tabs Background or Accents sections. If you can’t alter the borders there, follow the tutorial below to manually remove.

Remove the border around page tabs – Manually

Go to Template > Edit HTML and between <b:skin> and </b:skin> you’ll find a section called Tabs, this controls the style of your page tabs or navigation menu so you will need to remove the borders from here. The following selectors are some of the areas you’ll want to have a look at, these typically have border properties but of course, it will depend on you code.


.tabs-inner .widget li a { ... }

.tabs-inner .widget ul { ... }

.tabs-inner .section:first-child ul { ... }

.tabs-inner .section:first-child { ... }

.tabs-inner .widget li a { ... }

remove the border from page tabs navigation blogger

Look for the properties border, border-top, border-bottom, border-right, and border-left. Either remove it, or change the value to 0 or for each. This will remove the border.

.selector { border-top: 0; }

Alternatively, you could change it to match your background or make it transparent, making it a little easier to add back if you need to.

.selector { border-bottom: 1px solid #ffffff;} 
.selector { border-bottom: 1px solid transparent;} 

Post last updated:

45 responses to “How to remove borders from page tabs gagdet on blogger”

  1. Thanks girl! Helped a lot 🙂 xx

    1. No problem 🙂 cute blog x

  2. Hi, I’ve tried this method to remove the border from my page tabs and it just hasn’t worked at all and I’m not sure why. Is there any other ways I could try as I really need to remove the borders ASAP!

    Thanks!

    Kathleen xxx

    1. You still have borders on the following that need to be removed like above

      .tabs-inner .widget li a { ... }

      .PageList { ... }

  3. HI i trued this but i think i’m getting lost. Where should I put the value 0px or none between this code:

    /* Tabs
    ———————————————– */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);
    }

    .tabs-inner .section:first-child ul {
    margin-top: none(header.border.size);
    border-top: none(header.border.size) solid $(tabs.border.color);
    border-left: none(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: none(header.border.horizontalsize) solid $(tabs.border.color);
    }

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);
    }

    Please help me ASAP .

    1. You need to remove the border from all of the areas I’ve mentioned above – .tabs-inner .widget li a, .tabs-inner .widget ul , .tabs-inner .section:first-child ul, .tabs-inner .section:first-child & .tabs-inner .widget li a. For example


      .tabs-inner .section:first-child ul {
      margin-top: none(header.border.size);
      border-top: 0px solid #fff;
      border-left: 0px solid #fff;
      border-right: 0px solid #fff;
      }

  4. Hi, Ellie!

    Thank you sooo much for this nice tutorial! I need this so much and I cannot find anywhere but suddenly when I looked for blogger design related tutorial, Google brought me to you!

    Anyway, I am really not good in HTML code, actually it works. But why the pages turned to like this: my blog.

    Thanks before for the help, Ellie. Good day! (:

    1. Hi Jane, what happened to the pages?

  5. Nicola

    Hi thanks for this. All borders removed except the top one. I’ve searched for every piece of HTML and replaced value with 0px?! http://www.stylishbutskint.co.uk

    1. Hello, it’s under .tabs-inner .section:first-child ul and looks like border-top: 1px solid #eeeeee; 🙂

  6. Hi Ellie! Thank you so much for posting this. I had been wanting to remove the right and left borders for a really long time and hadn’t been able to find a tutorial on it. That was VERY helpful! I am about to change the logo of my blog and wanted to edit the layout before I use the new logo.

    Thanks again!

    xx

    1. No problem 🙂 happy to help x

  7. alice

    Hi love,

    I have 5 drop down menu tabs across the top of my blog. I’ve been trying to change the background hover color of each subtab from gray to white. Could you help me?

    Thank you in advance xx

    1. Hello, I’ve updated the CSS code and also included comments which should help you 🙂 xx

  8. Thanks so much! You are a lifesaver!

  9. Manikandan

    thanks

  10. Hi there! I tried following your tutorial but I seem to be lost as well. My code does not match up with your example up above. Could you tell me how to remove the borders to my tabs? Also, I’ve been trying to figure out how to remove the background color and can’t seem to figure that one out either. Could you help??

    1. Remove all instances of box-shadow code from .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover to remove the shadow which looks like a border. To change the background colour of the tabs search for .tabs-inner .widget li a and change background to #ffffff (white) or whatever colour you want it. Keep in mind that your tabs font is white, so removing the background means you’ll have to change the font colour to see the text.

  11. With the help of your tutorial I was able to remove the outer borders of the page tabs. Now I don’t know how to get rid of the borders in between the different categories (home / about /). Could you help me out here?

    Thank you for all the great tips! Your blog is a huge help for me 🙂

    Anna

    1. Hello Anna, thank you. The border values you’re looking for can be found under .tabs-inner .widget li a

  12. Hi!

    I removed my borders but now I want the top and bottom one back I wondered if you knew how to do this? Ive tried reversing your technique but it didn’t work.

    Thanks !

    Susie

    1. Hello, find .tabs-inner .widget ul and add border-top: 1px solid #000000; border-bottom: 1px solid #000000; back in between the brackets.

  13. Thank you so much for all your help!

    One final thing, I have done that but the border lines have breaks in it (if you take a look at my blog) and i was wondering if you knew how to change it into one straight line?

    Thanks again xx

    1. Hello, you added the borders to .tabs-inner .widget li a and not .tabs-inner .widget ul, this is why they’re only appearing above/below the link (li a) and not the entire navigation.

  14. Hi Ellie 🙂 Would you know how to change the gray color of the tabs on my tabs on my blog?
    http://sothisisbeauty.blogspot.com/
    I went to the advanced customized section and changed all the tabs colors to white (except text) but that just makes them look gray :/ I tried to change some stuff in html, but wasn’t sure what to change. I tried a few things but it didn’t work. Can you please help me? Thanks for your time and thanks if you can help!

    1. Hello, go to Template > Edit HTML and find .tabs-inner .widget li a. Between the brackets you can edit the value for background. It will probably look like background: transparent url(...) repeat scroll top left; so you can replace that with background: #HEXVALUE and change HEXVALUE for the colour. You can find hex values here but white is #FFFFFF.

      1. Thank you such!!!!! I got it fixed 🙂

  15. Amanda

    Hello! Thank you so much for this post i got rid of the top and bottom lines but cant seem to get rid of the lines in between 🙁

    1. What’s your URL?

  16. This was so helpful! Thank you so much! x

  17. Hello! I’ve tried a bunch of times to remove the border from my tabs and nothing worked. I even followed some of the instructions from the comments. Please help. This is what my html looks like and I do not know where to place 0px or none. Your help is much appreciated! Thank you so much!

    1. Find .tabs-inner .widget li a { border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);} and change to .tabs-inner .widget li a { border-$startSide: 0px solid $(content.background.color); border-$endSide: 0px solid $(tabs.border.color);} or .tabs-inner .widget li a { border-left: 0px solid $(content.background.color); border-right: 0px solid $(tabs.border.color);}

      1. this totally worked thanks!

  18. The code worked! Thank You so much! Love you!

  19. I try to do to make it transparent but it is still white,how should look like this whole code?

    1. I’m not sure what you mean? Making it transparent means it’s invisible, so if your background is white then it will be white too.

  20. Hello 🙂

    I have a fixed navigation bar and I would like to put a line below the page tabs.
    What code do I enter?

    Thank you so much, you are so so helpful!

    1. Hello, you can use border-bottom: 1px solid #000;, change 1px to alter the thickness and #000 to the hexvalue of the colour you want.

  21. Hi I am not able to make changes as mentioned as my theme is different. Please look into my site I want to just remove the tabs color of dark blue and keep the background of light blue.

    1. Hello. The tutorial above it for borders, you’re looking for background. You should be able to remove it from Template > Customise > Tabs BG > Selected BG. If not, you can manually remove the BG for .tabs-inner .widget li a in your CSS.

  22. Hi, I have been looking for this html so long! Finally I found it here, thanks a lot!
    But 1 question, after I tried to change colour for the tabs, I couldn’t see my blog when I try to custom it in the “Blogger Template Designer” mode, as well as the “Live on Blog”, I don’t know whats wrong !! :< Do u have any idea?

    Thx a lot!!!

    x

    1. Hi Elaine, after I tried to recover my them and then follow your instruction again, the problem from above is solved.

      Thanks so much for all the tips, it made my blog improved a lot!!! And every time I changed the css, I feel so happy, I learnt a lot from you! Thanks a lot!

      I did pretty much every thing I want by follow ur instruction, but the tab bar just can’t not spread evenly on the top, its looks not very decent at the moment. I have been trying to figure out a fw days, couldn’t figure it out… So I hope you can help me pls :(((

      http://testblog-alheaology.blogspot.com.es

      1. Hey Alice, how do you want it to look? The padding values are set very low, these are one of the things reponsible for the spacing.

  23. Thanks so much!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.