function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
modomodo 

Can't create rounded corners for apex:tabPanel

I have been attempting to use .css styling to achieve rounded corners for the active and inactive tabs for the standard apex:tabPanel. Rounded corners do appear but only on the "inner frame" of the tab header. There seems to be a hard coded light grey rectangular outer border around each of the tabs that I dont understand how to remove. There also seems to be a hard coded horizontal border between the top of the tab content frame and the bottom of each of the tabs. I have tried border: none, color and size options but they dont seem to affect this additional border. I would appreciate any thoughts or suggestions.

Amit Singh1989Amit Singh1989

Hi

Use something like this

 

<!-- style used for Active tab in TabPanel -->
   .activeTab {font-size:1.25em;font-style:normal;font-family: 'Calibri';font-weight:bold;background-color: #3090C7; color:white;width:60px;height:20px;background-image:none;border: 0px solid #747e96;border-bottom: 0px solid #fff;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0 px;
    border-bottom-right-radius: 0 px;
    }
   
  <!-- style used for Inactive tab in TabPanel -->
   .inactiveTab {font-size:1.25em;font-style:normal;font-family: 'Calibri';font-weight:bold;background-color: #E0FFFF; color:black;width:60px;height:20px;background-image:none;border: 0px solid #747e96;border-bottom: 0px solid #fff;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0 px;
    border-bottom-right-radius: 0 px;
    background: url("/img/alohaSkin/tabbar_sprite.png") repeat-x scroll left -73px transparent;
    }

 

 

and make the necessary changes...

 

Thanks
modomodo

Unfortunately it does not resolve what appears to be a second border that outlines the tab. I had previously applied styling similar to what you posted as well. And the styling does cause the "inner" tab box have rounded corners but there is still a grey outline around each tab as well as separator under all the tabs.
developerTeamdeveloperTeam

sam problem here.............. am not able remove the border given to tabs from <apex:tabpanel> component.. Can any solve this problem