set a corner radius for the lower corners of a tab in a tab navigator

Question

Hi,

Using CSS, i can set the corner radius of the top corners of a tab in a tabnavigator:

<mx:Style>
    .tabstyle
    {
        corner-radius: 10;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

However, I also want the bottom corners to have a radius. Does anyone know how to do that??

Answer 1

Assuming that the items you're putting in the TabNavigator are part of the standard Flex control set, you can have them use a custom programmatic skin that draws their background/border to match your desired look. Luckily, it's relatively easy to make a programmatic skin that grabs style information (like the corner-radius value) and uses that to control how the graphics are drawn -- just poke around the internet, and you're bound to find tutorials on skinning in Flex 3.

Answer 2

The answer by ZackBeNimble worked well, but I actually had the additional requirement that any layout should be easy to change. So what I've done now is set the skin of the tabs to an image that has the corner-radius I want.

<mx:Style>
    .tabstyle
    {
        skin: Embed(source="../images/corner_radius_tabs.png", scaleGridLeft="44", scaleGridRight="45", scaleGridTop="1", scaleGridBottom="2"); 
        padding-left: 44;
        padding-right: 44;
    }
</mx:Style>

<mx:TabNavigator tabStyleName="tabstyle" />

Answer 3

expanding on the answer from @ZackBeNimble It might be easier to use degrafa:

skin component:

<degrafa:GraphicBorderSkin xmlns:degrafa="namespaceLovin">

<degrafa:geometry>
    <degrafa:GeometryComposition>
        <degrafa:RoundedRectangleComplex topLeftRadius="0" topRightRadius="0" bottomLeftRadius="5" bottomRightRadius="5"
                        height="{skinHeight}"
                        width="{skinWidth}"
                        fill="{someFill}" />

</degrafa:geometry>


</degrafa:GraphicBorderSkin>

you'll need a fill. also, skinWidth and height are degrafa internal vars that they added in the beta -- you'll have to override updatedisplaylist if you're using an older version to get the unscaledwidth and unscaledheight.

then in the component you're skinning, set this style: borderSkin="package.class.location"

Might be a bit quicker if you're not familliar with traditional programmatic skinning... i'm more a fan of el degrafa.