Flex Spark Image Button component with rounded corners. Wraps the Image control and takes same source for image. .

ImageButton.as

/**
 * @authors Michael Ritchie, Ken Rogers 
 * @twitter @thanksmister, @pixels4nickels
 * @version Dec 9, 2011
 * */
package
{
	import flash.events.Event;
	
	import mx.events.FlexEvent;
	import mx.graphics.BitmapScaleMode;
	
	import spark.components.Button;
	import spark.primitives.BitmapImage;
	
	public class ImageButton extends Button
	{
		private static var IMAGE_BORDER:Number = 2;
		
		private var _cornerRadius:Number = 22;
		
		[Bindable]
		public var source:Object;
		
		[SkinPart(required="false")]
		public var imageDisplay:BitmapImage;
		
		public function ImageButton()
		{
			super();
			
			// set our custom skin class
			setStyle("skinClass", ImageButtonSkin );
		}
		
		[Bindable]
		public function get cornerRadius():Number
		{
			return _cornerRadius;
		}

		public function set cornerRadius(value:Number):void
		{
			_cornerRadius = value;
		}

		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if(instance == imageDisplay) {
                                 imageDisplay.addEventListener(FlexEvent.READY, imageDisplay_readyHandler);
				// for AIR 3.1 use BitmapScaleMode.ZOOM
				imageDisplay.scaleMode = BitmapScaleMode.STRETCH; 
				imageDisplay.source = source;
			}
		}
		
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if(instance == imageDisplay) {
				imageDisplay.source = null;
			}
		}
		
		override protected function commitProperties():void
		{
			super.commitProperties();
		}  

                private function imageDisplay_readyHandler(event:Event):void
		{
			if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
			{
				if(width == IMAGE_BORDER && height != 0)//did the user set the height but not the width on the tag?
				{
					if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight) + IMAGE_BORDER; 
					}
					else
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight) + IMAGE_BORDER; 
					}
				}
				else if(height == IMAGE_BORDER && width != 0)//did the user set the width but not the height on the tag?
				{
					if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth) + IMAGE_BORDER; 
					}
					else
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth) + IMAGE_BORDER; 
					}
				}
				else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth)
				{
					//trace(this.id + " width and height are custom."); 
				}
			}
		}  
	}
}

ImageButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             alpha.disabled="0.5" xmlns:local="*">
	
	<fx:Metadata>[HostComponent("ImageButton")]</fx:Metadata>
     
    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
 
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
			}          
                                 
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
	
	<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}" alwaysCreateDisplayObject="true">
		<s:fill>
			<!-- @private -->
			<s:SolidColor id="bgFill"/>
		</s:fill>
	</s:Rect>
	
	<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />

    <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}">
        <s:stroke>
			<s:SolidColorStroke weight="2" color="0x0055CC" color.over="0xFF0000" color.down="0xFF0000"/>
        </s:stroke>
    </s:Rect>
</s:SparkSkin>

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" 
					   xmlns:local="*">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>

	<local:ImageButton id="imageButton" 
					   source="http://news.nationalgeographic.com/news/2006/02/images/060217_kiwi.jpg" 
					   height="200" 
					   cornerRadius="10" 			   
					   />
	
	<local:RoundedImage id="roundedImage" 
						source="http://news.nationalgeographic.com/news/2006/02/images/060217_kiwi.jpg" 
						height="200" 
						cornerRadius="10" 
						/>	
</s:WindowedApplication>

RoundedImage.as

/**
 * @authors Michael Ritchie, Ken Rogers 
 * @twitter @thanksmister, @pixels4nickles
 * @version Dec 9, 2011
 * */
package
{
	import mx.graphics.BitmapScaleMode;
	
	import spark.components.Image;
	
	public class RoundedImage extends Image
	{
		[Bindable]
		public var cornerRadius:Number = 10;
		
		public function RoundedImage()
		{
			super();
			
			// set our custom skin class
			setStyle("skinClass", RoundedImageSkin );
			
			// for AIR 3.1 use BitmapScaleMode.ZOOM
			scaleMode = BitmapScaleMode.STRETCH; 
		}

		override protected function commitProperties():void
		{
			if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
			{
				if(width == 0 && height != 0)//did the user set the height but not the width on the tag?
				{
					if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight); 
					}
					else
					{
						width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight); 
					}
				}
				else if(height == 0 && width != 0)//did the user set the width but not the height on the tag?
				{
					if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth); 
					}
					else
					{
						height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth); 
					}
				}
				else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth)
				{
					// custom width and height
				}
			}
		}
	}
}

RoundedImage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5" >
	
	<fx:Metadata>[HostComponent("RoundedImage")]</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			
		]]>
	</fx:Script>
    
    <s:states>
        <s:State name="uninitialized"/>
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>
	
	<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}" alwaysCreateDisplayObject="true">
		<s:fill>
			<!-- @private -->
			<s:SolidColor id="bgFill"/>
		</s:fill>
	</s:Rect>
	
	<!--- Primary image display skin part. -->
	<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />
	
	<!--- Progress indicator skin part. -->
	<s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />
	
	<!--- Icon that appears in place of the image when an invalid image is loaded. -->
	<s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0" mask="{background.displayObject}"/>
    
</s:Skin>