« Gestural Navigation in Flex | Main | 4-color gradient CSS customizable Programmatic Skin-set for Flex 1.5 »
October 04, 2005
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.
Posted by Peter Baird at October 4, 2005 08:30 AM
Comments
Wow. Thanks for the article. Really cleared things up. Is there any way to get rounded corners (bottom) for a TabNavigator ?
Posted by: superabe at October 4, 2005 03:25 PM
Sweet !! Now if i could only get the fill colors to work, to have that nice gradient effect.
Posted by: Jason Hawryluk at October 5, 2005 01:56 AM
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.
Posted by: Peter Baird at October 5, 2005 09:50 AM
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.
Posted by: superabe at February 2, 2006 08:54 AM
yes same problem here, image shows up but rounded corners are ignored too. Any workaround?
Posted by: Stefan Richter at January 3, 2007 09:30 AM
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.
Posted by: Ben Dover at February 2, 2007 02:46 PM
How do you get rounded corners on the top, but not the bottom like your style control box.?
Posted by: Shannon at February 7, 2007 01:49 PM
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.
Posted by: Peter Baird at February 7, 2007 01:52 PM
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.
Posted by: Jeremy at March 30, 2007 12:55 PM
Is there a way to get rounded corners on the bottom, but not on the top for TabNavigator ?
Posted by: Krittiya at December 30, 2007 07:59 PM