How to remove the border from TabPanel in Visualforce Page

Question

I am creating a visualforce page with tabPanel. Inside that there are tabs for details and other related lists. Visually it looks like this:

As you can see there are borders on the tabs and i want to remove them. The code that i am using is the following:

<apex:page standardController="Account" showHeader="true" 
      tabStyle="account"  >
   <style>
      .activeTab {background-color: #236FBD; color:white; width: 170px; height: 40px; padding-top: 25px; font-size: 16px; font-style: bold; border: 0px;
         background-image:none; border-radius: 10px;}
      .inactiveTab { background-color: lightgrey; color:black; width: 170px; height: 40px; padding-top: 25px; font-size: 16px; font-style: bold; border: 0px;
         background-image: none}
   </style>
      <apex:pageBlock title="Hello {!Account.Contacted_by__c}!" mode="edit" >
        You are displaying values from the {!account.name} account and a separate contact
        that is specified by a query string parameter.
    </apex:pageBlock>
   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                  id="AccountTabPanel" tabClass="activeTab" 
                  inactiveTabClass="inactiveTab"  >   
      <apex:tab label="Details" name="AccDetails" id="tabdetails" style="background-color: white; ">
         <apex:detail relatedList="false" title="true"/>
      </apex:tab>
      <apex:tab label="Contacts" name="Contacts" id="tabContact" >
         <apex:relatedList subject="{!account}" list="contacts"  />
      </apex:tab>
      <apex:tab label="Opportunities" name="Opportunities" 
                id="tabOpp">
         <apex:relatedList subject="{!account}" 
                           list="opportunities" />
      </apex:tab>
      <apex:tab label="Open Activities" name="OpenActivities" 
                id="tabOpenAct">
         <apex:relatedList subject="{!account}" 
                           list="OpenActivities" />
      </apex:tab>
      <apex:tab label="Activity History" name="ActivityHistory" id="tabActHist">
          <apex:relatedList subject="{!account}" list="ActivityHistories" />
      </apex:tab>
      <apex:tab label="Notes & Attachments" 
                name="NotesAndAttachments" id="tabNoteAtt">
         <apex:relatedList subject="{!account}" 
                           list="CombinedAttachments" />
      </apex:tab>
   </apex:tabPanel>

</apex:page>

Please advise,

Darko

Answer 1

From the above snapshot, i think you might have overridden Salesforce CSS which would cause unexpected behaviors in HTML elements getting rendered.

One way to do it is to remove all the Salesforce CSS Styles. This can be done by the following tag in VF Page.

<apex:page standardStylesheets="false">

This will ensure that the Salesforce CSS Styles are not loaded in your VF Page. Once the above is included, you will have complete control over all CSS Styles.