Round Specific Corners of a Button in Flex

Question

I want to round specific corners of buttons to create something like mx.controls.ButtonBar. But I cannot figure out how ButtonBar does this even after looking at its source. I thought the focusRoundedCorners css property was the answer but that applies only to drawing the button's focus box. Any idea on this would be greatly appreciated!

Answer 1

You can do this by creating custom skins for your buttons. Take a look at the source file in the Flex SDK for ButtonBarFirstButtonSkin.mxml (assuming you are using SDK 4). In a nutshell, when you draw the background/border/fill, you set topLeftRadiusX (or whatever corners you want rounded) on the Rect object. After creating your skin, assign it to the button in your CSS. Hope that helps.