Changing the corner radius of a Flex ComboBox control

The following example shows you how you can change the corner radius of a ComboBox control in Flex by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-corner-radius-of-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="12"
                        value="5"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            cornerRadius="{slider.value}">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Three" />
                <mx:Object label="Four" />
                <mx:Object label="Five" />
                <mx:Object label="Six" />
                <mx:Object label="Seven" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

Since cornerRadius is a style, you can also set the value globally in an external .CSS file, or inline in an <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    ComboBox {
        cornerRadius: 12;
    }
</mx:Style>

Or, you can set the cornerRadius style using ActionScript, as shown in the following snippet:

comboBox.setStyle("cornerRadius", 12);