Tabbed Panel Rounded Corner

Question

Hi,
I've been looking all over to use the custom rounded corner
with the TABBED PANEL. I've tried many techiques and still
unsucessful. BUT recently, I've figured it out how to easily
achieve the ROUNDED TABS in the Tabbed Panels.
I hope this will help someone.
Here's how:
Create the rounded button.
Crop the button about 75% from left to right and save it.
Now save the other 25% on the right side.
For the right corner of the button.
Create CSS class...Be sure to adjust accordingly the padding.
.TabbedCornerRight{
padding: 10px;
background: url(right_corner.png) no-repeat right 70%;
Left corner...add background into the TabbedPanels CSS...be
sure to adjust to fit your specification
.TabbedPanelsTab {
position: relative;
top: 1px;
height: 13px;
float: left;
padding: 5px 0px 8px 0px;
margin: 0px 2px 0px 0px;
list-style: none;
background-image: url(left_corner.png);
border-left: solid 0px #7197c3;
border-top: solid 0px #7197c3;
border-right: solid 0px #7197c3;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-size: 0.9em;
Finally, add the <span> into your tab...like this:
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><span
class="TabbedCornerRight"> Tab One </span></li>
<li class="TabbedPanelsTab" tabindex="0"><span
class="TabbedCornerRight"> Tab Two</span></li>
</ul>
Note: My right corner is just the outline and background
tranparent
That's it. I hope it helps.
S

Answer 1

It works the same way. I have mine done in 3 colors ( Silver,
Dark Grey, Light Grey). The trick is to keep the outline of your
tab the same color.
It's very important to just use the outline of the RIGHT
CORNER..that is no background color is in use. This way, when you
hover over the button, the outline is till there regardless of what
color you have.
The hardest part is getting the right corner graphic done
right and adjusting the padding and margin in the CSS.
.TabbedPanelsTabHover {
background-image: url(tab_hover.png);
.TabbedPanelsTabSelected {
background-image: url(tab_selected.png);
font-weight: bold;
font-size: 0.9em;
color: #004785;