The following example shows how you can set the corner radius on a ButtonBar control in Flex by setting the buttonStyleName and cornerRadius styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/ -->
<mx:Application name="ButtonBar_buttonStyleName_cornerRadius_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .myCustomButtonStyleName {
            cornerRadius: 16;
        }
    </mx:Style>
 
    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
    </mx:Array>
 
    <mx:ButtonBar id="buttonBar"
            buttonStyleName="myCustomButtonStyleName"
            dataProvider="{arr}"
            height="32" />
 
</mx:Application>

View source is enabled in the following example.

If you want to set the buttonStyleName style using an external .CSS file or <mx:Style /> block, you can use code similar to the following snippet:

<mx:Style>
    ButtonBar {
        buttonStyleName: myCustomButtonStyleName;
    }
 
    .myCustomButtonStyleName {
        cornerRadius: 16;
    }
</mx:Style>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

3 Responses to Setting the button corner radius in a Flex ButtonBar control

  1. abhishek says:

    hello friends,
    could we add upskin and selcted skin to this buttonBar with corner radious?
    thx u in advanced,
    abhishekchess1@gmail.com
    :)

  2. siggins says:

    How do you set the middle buttons to have rounded corners. the buttonStyleName : cornerRadius does not affect the middle buttons. Help!

  3. john chambers says:

    Any takers for the previous question?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree