Round-Cornered Containers in Flex

This issue has come up with a few clients, which is, how do you round the corners on a container. Of course, by default, the container itself is invisible, but in these instances the client has given a box, an hbox, or a vbox a different background color in order to use it as a graphical element, as in the example below. Many have found, with some frustration, that if you simply set cornerRadius to a value other than 0, the corners are still squared off.

The reason this is happening is that cornerRadius is actually a property of the container border, and by default containers have no border. In order to use the cornerRadius property on a container, you need to set the borderStyle to solid. Note in the example below how changing the borderStyle automatically reflects the cornerRadius property on the container. Want the cornerRadius, but you don’t want a border? simply set the borderThickness to zero, and as long as the borderStyle is set to solid, the corners will still be rounded. Similarly, applying a drop shadow to the container also requires the borderStyle be set to “solid”. Hope that helps.