In a previous example, “Rounding the corners of an Image control in Flex using a mask”, we saw how to round the corners on a Flex Image control by creating a rounded Sprite control using the drawRoundRect() method and setting the mask property.
The following example shows how you can round selected corners of an Image control in Flex by creating a rounded Sprite control using the drawRoundRectComplex() method and setting the mask property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/20/rounding-individual-corners-of-an-image-control-in-flex-using-a-mask/ --> <mx:Application name="Image_mask_test2" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.events.ResizeEvent; private var roundedMask:Sprite; private function init():void { roundedMask = new Sprite(); canvas.rawChildren.addChild(roundedMask); } private function image_resize(evt:ResizeEvent):void { var w:Number = evt.currentTarget.width; var h:Number = evt.currentTarget.height; var cornerRadius:uint = 60; roundedMask.graphics.clear(); roundedMask.graphics.beginFill(0xFF0000); roundedMask.graphics.drawRoundRectComplex(0, 0, w, h, 0, cornerRadius, 0, cornerRadius); roundedMask.graphics.endFill(); image.mask = roundedMask; } ]]> </mx:Script> <mx:Canvas id="canvas"> <mx:Image id="image" source="http://www.helpexamples.com/flash/images/image1.jpg" resize="image_resize(event);" /> </mx:Canvas> </mx:Application>
View source is enabled in the following example.

{ 3 comments… read them below or add one }
I see you moved this post here, so I’ll join with my question…
Thanks Peter, that worked great.
Sorry to nag but do you know maybe how I can also add a pixel border to the outcome rounded image? I managed that before rounding the corners with a box behind it but that won’t do the work now.
Thanks in advance,
Guy
@guy,
I replied to the other thread also, but I’ll post the short version here as well. You can add a GlowFilter to the Canvas and it should do what you’re looking for (but you may need to adjust the settings to make it look right for your app):
Peter
Thanks Peter, that did the job