BorderContainer Corner Rounding Only At Top Or Bottom - apache-flex

Question

I need to round at only the top or bottom of a border container not all four corners, is their some CSS that I can use or do I have to create two new skins. I was reading their used to be a property for this for HBox back in the old days, is their not a property for BorderContainer now?

Answer 1

With BorderContainer you can't. However, the visual effect you want to achieve can easily be created with SkinnableContainer and a custom skin. In fact BorderContainer is just a specific form of SkinnableContainer.
So instead of BorferContainer create a SkinnableContainer with property 'skinClass':
<s:SkinnableContainer left="0" right="0" top="0" bottom="0"
skinClass="my.app.skins.TopRoundedCornerSkin">
<!--- your components go here --->
</s:SkinnableContainer>
Then create the skin class TopRoundedCornerSkin.mxml like so:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0"
topLeftRadiusX="10" topLeftRadiusY="10"
topRightRadiusX="10" topRightRadiusY="10">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x000000" />
</s:stroke>
</s:Rect>
<s:Group id="contentGroup" left="10" right="10" top="10" bottom="10"
minWidth="0" minHeight="0" />
</s:Skin>
On the background rectangle, we set 4 radius properties to create the rounded corner you need.