[SalesForce] CSS for VisualForce Apex tabPanel tweaking

Have read thru various approaches but having a problem formatting a VisualForce tabPanel . I'm almost there but can't seem to get rid of the light shaded square border around each tab.

BEFORE adding CSS update:

enter image description here

AFTER adding CSS update

.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}

enter image description here

Here's the VisualForce tag and related CSS. Any suggestions ? I added the SalesForce style as well which looks good but want to have more control over the code.

<apex:stylesheet value="/sCSS/21.0/sprites/1297816277000/Theme3/default/gc/versioning.css" />

<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" headerClass="tabPanel" activeTabClass="activeTab" inactiveTabClass="inactiveTab" >

<!-- LOB Workers Comp -->
<apex:tab label="*Workers Comp" name="tab1" id="tab1"  rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'WC'),"true","false")}" > 
<apex:tab label="*Pers Auto" name="tab1" id="tab1"  rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'PA'),"true","false")}" > 

CSS :

.rich-tabhdr-side-cell {border-top:none;}   
.rich-tabhdr-side-border {background-image:none;}

.tabPanel {
   border: none !important;
   }

.activeTab {
    background-color: lightblue;    
    background-image:none; 
    font-size: 18px;
    border-radius: 50px 20px;
    border: none !important;    
    }
.inactiveTab {
    background-color: lightgrey;    
    background-image:none;
    font-size: 12px;
    color:blue; 
    border-radius: 50px 20px;
    border: none !important;
}

Best Answer

.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}

That should do it.

Related Topic