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.

11 Responses to Round-Cornered Containers in Flex

  1. superabe says:

    Wow. Thanks for the article. Really cleared things up. Is there any way to get rounded corners (bottom) for a TabNavigator ?

  2. Jason Hawryluk says:

    Sweet !! Now if i could only get the fill colors to work, to have that nice gradient effect.

  3. Peter Baird says:

    For rounded corners on a TabNavigator, simply set the cornerRadius to the desired radius, and it should work fine. Of course there’s a caveat. All four corners will be rounded, top and bottom, and that there will be a little cut in the upper-left between the box and the tab. To avoid that, set the marginLeft value. So try setting cornerRadius to 8, and marginLeft to 8 in the TabNavigator to see what you get. Should work fine.

    As for a gradient background for a container or box, that’s no problem also. You could do some actionscript trickery to draw the gradient, or the simplest is simply create a gradient in flash authoring and export as a swf. Then set the containers background image to the swf, and set the background size to 100%. the gradient swf will scale to fill whatever you’ve got.

  4. superabe says:

    This worked fine for me till I tried to use an embedded image as a background for a VBox. The rounded corners dont seem to mask the image out.

  5. yes same problem here, image shows up but rounded corners are ignored too. Any workaround?

  6. Ben Dover says:

    Hello! Thank you for the help! It is really a pity that they haven’t solved this issue yet. I hope we can round the corners in the future with an inset and outset enabled. Could you post your flex code for this as well.

  7. Shannon says:

    How do you get rounded corners on the top, but not the bottom like your style control box.?

  8. Peter Baird says:

    Hi Shannon. The Control Box is a Panel Component, and panels have a lot more to them than your usual container. Included in the Panel control is a style called “roundedBottomCorners” (in Flex 2) that you can set to false in order to square off the bottom.

  9. Jeremy says:

    I can’t seem to use a css style sheet to configure a panel properly. background-alpha doesn’t seem to work when border: solid. drop-shadow: false doesn’t work at all. http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html
    shows an example of these properties working, but using the generated style-sheet doesn’t work when anything is inside the panel.

  10. Krittiya says:

    Is there a way to get rounded corners on the bottom, but not on the top for TabNavigator ?

  11. Bhaskar says:

    Hi,

    Is there a way to get rounded corners on the bottom, but not on the top for TabNavigator ?

    I also have a peculiar problem. I have background color of my Application, Window as Black (#000000). There’s a Panel as a child to the Window. The Panel has White background.

    >>When I set the showFlexChrome=”true” on the Window, I get the Flex chrome’s title bar and I get the color of the Application and the Window as Black. (EXPECTED).

    >>BUT, when I set the showFlexChrome=”false” on the Window, I don’t get the Flex chrome’s title bar (EXPECTED) AND I get the color of the Application and the Window as WHITE. (UNEXPECTED).

    Anybody knows where’s the problem??

    -Bhaskar