Flex HBox with background color and rounded corner, wiered problem

I am facing a wiered problem in Flex. I Have a canvas with a HBox and Label. Please find the code below.

   <mx:VBox verticalAlign="top" horizontalAlign="center"
        fontSize="12" fontWeight="normal" verticalGap="0">
        <mx:Label text="Cover" />
        <mx:Canvas width="120" styleName="pbcontainer">
            <mx:HBox id="pb" height="35" />
            <mx:Label id="dashboard_cover" fontWeight="normal" 
                      fontSize="20" horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
    </mx:VBox>


.pbcontainer {
    cornerRadius: 15;
    backgroundColor: #FFFFFF;
    borderStyle: solid;
    borderThickness: 2;
    borderColor: #000000;
}

I am trying to implement a ProgressBar here. Now, the problem is if the percentWidth of pb is less than 5, the h开发者_JAVA技巧aloBlue color is spilling out which is not desired. Please find the image below. Can anyone help me in solving this issue.

Thanks,

Anji

Just an idea, instead of using an HBox with a background, try using a ProgressBar and set its progress instead of percentWidth of the HBox.

Edit: Oh well, based on the discussion in the comments, it seems the above solution is not feasible. Did you try setting the cornerRadius on the inner HBox? It is the one with the blue background isn't it?