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 { ... }

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;}