Corner radius applied only to specific corners

Question

Guys,

I've this tabs that I wanted to make rounded only on top-right and top-left corners. But it ended up rounding all 4 corners.

What I did:

<mx:TabNavigator id="myTabNav" x="58" y="61" width="584"  height="200" creationComplete="setColors(event)" styleName="myTabStyle">
  <pages:One  label="ThisOne" id="one"  name="One"/>
  <pages:Two label="Twoooooooooooh" id="two"  width="584" name="two" />
  <pages:Three label="Threeeeeeeeh" id="three"  width="583" name="three" />
</mx:TabNavigator>

and

my pageStyles.css file is:

.myTabStyle {
 tabStyleName: "myTabs"; 

 corner-radius:15;
}

.myTabs {
 backgroundColor: #FF0080;
 corner-radius:10;
 focusRoundedCorners: "tl tr";
 skin:ClassReference('mx.skins.spark.ButtonSkin'); 
 chromeColor: #FF0080;  /* this is the tab widget itself, not the content */
 border-style:outset;
}

As you can see I have the "focusRoundedCorners" to point to top-right and top-left but no luck. What I got is:

What am I doing wrong guys??

Thanks in advance.

Answer 1

Have a look at this tool http://www.wabysabi.com/flex/enhancedbuttonskin/

I would guess that the focus part of the focusRoundedCorners refers to how it should be when it has focus only..