Rounding a Button control’s corners using the cornerRadius property

A simple example which lets you tweak a Button control’s cornerRadius property using a HSlider control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/09/rounding-a-button-controls-corners-using-the-cornerradius-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Button id="button" height="40"
            cornerRadius="{slider.value}"
            label="Button.cornerRadius" />

    <mx:HSlider id="slider"
            width="{button.width}"
            minimum="0" maximum="{button.height/2}"
            snapInterval="1" tickInterval="1"
            liveDragging="true"
            dataTipPrecision="0" />

</mx:Application>

View source is enabled in the following example.

Tagged as: cornerRadius